Javascript 如何使用jQueryUI对话框将关闭按钮与打开按钮绑定？

我正在尝试用5个jQuery对话框模式创建一个类似向导的体验。我想从第一个模式启动一个新模式，打开第二个，但关闭第一个。第三、第四、第五也是一样

我可以很好地打开嵌套在其他模态中的模态，但是当下一个模态打开时，前一个模态不会关闭。最后，我有5个窗口在彼此的顶部打开

下面是我用来打开5个模态中的两个的代码（其余的将使用相同的逻辑按顺序进行：

<script>
  $(function() {
   $( "#modal_1" ).dialog({position:['middle',60],
        open: function(event, ui) {  
        dialogClass: 'ui-widget-shadow',
        modal: true,    
        autoOpen: false,
        width: '950px',
        close: function(ev, ui) {$(this).close();}
        });

    $( ".modal_1open" ).click(function() {
      $( "#modal_1" ).dialog( "open" );
        return false;
        });

    $( ".btnNext" ).click(function(){
      $('.ui-dialog-content').dialog( "close" );
        })
    });
</script>
<script>
  $(function() {
   $( "#modal_2" ).dialog({position:['middle',60],
        open: function(event, ui) {  
        dialogClass: 'ui-widget-shadow',
        modal: true,    
        autoOpen: false,
        width: '950px',
        close: function(ev, ui) {$(this).close();}
        });

    $( ".modal_2open" ).click(function() {
      $( "#modal_2" ).dialog( "open" );
        return false;
        });

    $( ".btnNext" ).click(function(){
      $('.ui-dialog-content').dialog( "close" );
        })
    });
</script>

$（函数（）{
$（“#模态1”）。对话框（{position:['middle'，60]，
打开：函数（事件，ui）{
dialogClass:'ui小部件阴影'，
莫代尔：是的，
自动打开：错误，
宽度：“950px”，
关闭：函数（ev，ui）{$（this.close（）；}
});
$（“.modal_1open”）。单击（函数（）{
$（“模态1”）。对话框（“打开”）；
返回false；
});
$（“.btnNext”）。单击（函数（）{
$（'.ui对话框内容'）。对话框（“关闭”）；
})
});
$（函数（）{
$（“#模态2”）。对话框（{position:['middle'，60]，
打开：函数（事件，ui）{
dialogClass:'ui小部件阴影'，
莫代尔：是的，
自动打开：错误，
宽度：“950px”，
关闭：函数（ev，ui）{$（this.close（）；}
});
$（“.modal_2open”）。单击（函数（）{
$（“模态2”）。对话框（“打开”）；
返回false；
});
$（“.btnNext”）。单击（函数（）{
$（'.ui对话框内容'）。对话框（“关闭”）；
})
});

以下是html的一个示例：

<a class="button btnNext">Continue</a> <!--this is the button inside the modal that is supposed to fire the next modal-->

<div style="display:none" id="modal_1" title="Login">
  <!--#include file="modal_1.asp"-->
</div>
<div style="display:none;" id="modal_2" title="Page Two Title">
  <!--#include file="modal_2.asp"-->
</div>

继续

---

我想我可以将close函数绑定到next的一个打开位置，但我不知道如何绑定。有什么帮助吗？？？

我根据提示编写了代码，并做了一些测试。 在我看来，你分配错了选项。 关闭：用于事件处理程序，而不是按钮。 使用按钮字段定义按钮。单击关闭对话框并打开下一个对话框时

 $(this).dialog("close");
 $("#modal_2").dialog("open");

我的简单版本如下：

$(function() {
$("#modal_1").dialog({
    modal: true,
    autoOpen: true,
    buttons: [{text: "Next",click: function() {
                $(this).dialog("close");
                $("#modal_2").dialog("open");
            }
        }]
});

$("#modal_2").dialog({
    modal: true,
    autoOpen: false,
    buttons: [{text: "Next",click: function() {
                $(this).dialog("close");
                $("#modal_1").dialog("open");
            }}]
});
});

我在这里测试过：

---

这是一个糟糕的设计模式。为什么不更新单一模式的内容呢？我看到另一篇类似的帖子，看起来也一样，但我需要一些帮助，让它与我的代码一起工作：