Question

I am trying to create a wizard-like experience with 5 jQuery Dialog modals. I want to fire a new modal from the first one that opens the second, but closes the first. The same with third, the fourth, and the fifth.

I can open the modals nested inside the other modals just fine, but the previous one doesn’t close when the next one opens. In the end, I have 5 windows open on top of each other.

Here is the code I am using to open two of the 5 modals(the rest will go in order using the same logic:

<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>

Here is an example of the 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>

I think I can bind the close function with an opening of the next, but I don’t know how. Any help??

Answer 1

I diet your code to clue and did some test.
IMO you had missassigned options.
close: is for event handler, not button.
Use buttons field for define buttons. when click close your dialog and open next one…

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

My simple version below:

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

I tested it here:
http://jsfiddle.net/JmgKS/8/