jQuery Mobile Multiple Dialog Boxes in One Dialog

Question

I have searched and have not found example of doing this. I want to be able to have a dialog box open for jQM and have it where there is a step by step process that takes pl

Answer 1

Here is an example, using .show() and .hide(). The trick here is to create several divs, and then show/hide them.

Working Demo

Markup

 

  
Dialog
 


 

  
Page 1
  
Text for #page1
  

   

    Previous
   
   

    Next
   
  
 




  
Page 2
  
Text for #page2
  

   

    Previous
   
   

    Next
   
  
 



  
Page 3
  
Text for #page3
  

   

    Previous
   
   

    Next
   
  
 

Code

// hide previous button, #page2 and #page3 once opened
$('#dialog').find('#page1 a.prev').hide();
$('#page2, #page3').hide();

// #page1 to #page2
$('#page1 a.next').on('click', function () {
 $('#page1').hide();
 $('#page2').show();
});

// #page2 to #page3
$('#page2 a.next').on('click', function () {
 $('#page1, #page2').hide();
 $('#page3').show();
 $('#dialog').find('#page3 a.next').hide();
});

// #page2 to #page1
$('#page2 a.prev').on('click', function () {
 $('#page2').hide();
 $('#page1').show();
});

// #page3 to #page2
$('#page3 a.prev').on('click', function () {
 $('#page2, #page3').hide();
 $('#page2').show();
});