I am working on a project that involves creating a wizard-like experience using 5 jQuery Dialog modals. The idea is to have each modal open the next one in sequence while closing itself. However, I am facing an issue where all the modals remain open on top of each other instead of closing as the next one opens.
Below is the code snippet that I am using to open two of the 5 modals (the rest will follow 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>
Here is an example of the html structure:
<a class="button btnNext">Continue</a>
<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 believe I need to bind the close function with the opening of the next modal, but I am unsure how to do that. Any suggestions or guidance would be greatly appreciated!