如何使用jQuery UI对话框绑定一个关闭按钮和一个打开按钮

Question

我正在尝试用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>

下面是一个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的开头绑定，但是我不知道怎么做。任何帮助吗?

Answer 1

我修改了你的代码并做了一些测试。在我看来，你没有分配好选项。Close:用于事件处理程序，而不是按钮。使用buttons字段定义按钮。当点击关闭对话框并打开下一个时…

 $(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");
            }}]
});
});

我在这里测试它:http://jsfiddle.net/JmgKS/8/