jQuery Mobile Multiple Dialog Boxes in One Dialog -

i have searched , have not found example of doing this. want able have dialog box open jqm , have there step step process takes place inside of 1 dialog box. figuring require multiple dialog boxes loading 1 dialog box , don't know if possible. using backbone jqm , want able load underscore templates in dialog box each step of way. figuring 4-5 steps in dialog box.

is possible?

thank you.

here example, using .show() , .hide(). trick here create several divs, , show/hide them.

working demo

markup

<div data-role="dialog" id="dialog">  <div data-role="header" data-theme="d">   <h1>dialog</h1>  </div>  <!-- first page -->  <div data-role="content" id="page1">   <h3>page 1</h3>   <p>text #page1</p>   <div class="ui-grid-a">    <div class="ui-block-a">     <a href="#" data-role="button" data-theme="b" class="prev">previous</a>    </div>    <div class="ui-block-b">     <a href="#" data-role="button" data-theme="e" class="next">next</a>    </div>   </div>  </div>  <!-- second page -->  <div data-role="content" id="page2">   <h3>page 2</h3>   <p>text #page2</p>   <div class="ui-grid-a">    <div class="ui-block-a">     <a href="#" data-role="button" data-theme="b" class="prev">previous</a>    </div>    <div class="ui-block-b">     <a href="#" data-role="button" data-theme="e" class="next">next</a>    </div>   </div>  </div>  <!-- third page --> <div data-role="content" id="page3">   <h3>page 3</h3>   <p>text #page3</p>   <div class="ui-grid-a">    <div class="ui-block-a">     <a href="#" data-role="button" data-theme="b" class="prev">previous</a>    </div>    <div class="ui-block-b">     <a href="#" data-role="button" data-theme="e" class="next">next</a>    </div>   </div>  </div>  </div> 

code

// hide previous button, #page2 , #page3 once opened $('#dialog').find('#page1 a.prev').hide(); $('#page2, #page3').hide();  // #page1 #page2 $('#page1 a.next').on('click', function () {  $('#page1').hide();  $('#page2').show(); });  // #page2 #page3 $('#page2 a.next').on('click', function () {  $('#page1, #page2').hide();  $('#page3').show();  $('#dialog').find('#page3 a.next').hide(); });  // #page2 #page1 $('#page2 a.prev').on('click', function () {  $('#page2').hide();  $('#page1').show(); });  // #page3 #page2 $('#page3 a.prev').on('click', function () {  $('#page2, #page3').hide();  $('#page2').show(); });