Show raw jquery mobile simple dialog above another raw jquery mobile simple dialog

Question

Please see the attached image

In my page i have home icon. When i cli

Answer 1

UPDATE: just realized you are using the simpledialog plugin and not the native jQM dialog.

Using SimpleDialog2

ForSimpleDialog2 see this fiddle I created.

In the main jQM page there is a link for launching the checkbox dialog which is included in the HTML markup as inline content:

$(document).delegate('#inliner', 'click', function() {
    $('#inlinecontent').simpledialog2({themeDialog: 'c'});
});
<a href="#" id="inliner" data-role="button" >Open dialog</a>

<div id="inlinecontent" style="display:none" data-  options='{"mode":"blank","headerText":"Dialog","headerClose":false,"blankContent":true}'> 
<div  style="padding: 15px;">       
    <fieldset id="cBoxes" data-role="controlgroup" >
        <legend>My CheckBoxes:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
        <label for="checkbox-v-2a">One</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Three</label>
    </fieldset>
    <a id="dialogSubmit" href="#"  data-role="button">Close Dialog</a>          
    </div>
</div>

When you click the Close Dialog button, it uses Omar's code to check if any checkboxes are checked. If they are, it just closes the dialog returning to the main page. If none are checked, it launches an error dialog:

$(document).delegate('#dialogSubmit', 'click', function() {
    var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
    if (numChecked > 0){
        $(document).trigger('simpledialog', {'method':'close'});
    } else {
      $('<div>').simpledialog2({
        mode: 'blank',
        headerText: 'Warning',
        headerClose: true,
        themeDialog: 'e',
        blankContent : 
          "<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
          // NOTE: the use of rel="close" causes this button to close the dialog.
          "<a rel='close' data-role='button' href='#'>OK</a></div>"
     });        
   }
});

To accomplish the same with the native jQM dialog:

I have created a fiddle demonstrating chained dialogs according to my understanding of your problem.

Basically, from the first page you click a link button:

<a href="#foo" data-rel="dialog" data-role="button" data-transition="flow">Open dialog</a>

to launch a dialog. This dialog includes 3 checkboxes and a 'submit' button:

<div id="foo" data-role="page" data-close-btn="none">
    <div data-role="header">
        <h1>Dialog Header</h1>
    </div>    
    <div data-role="content">        
      <fieldset id="cBoxes" data-role="controlgroup">
        <legend>My CheckBoxes:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
        <label for="checkbox-v-2a">One</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Three</label>
      </fieldset>        
      <a id="dialogSubmit" href="#"  data-role="button">Close Dialog</a>        
    </div>
</div>

When you click '#dialogSubmit', it uses Omar's code to check if any checkboxes are checked. If they are, it just closes the dialog returning to the main page. If none are checked, it launches an error dialog.

$('#dialogSubmit').on("click", function(){
  var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
  if (numChecked > 0){
    $("#foo").dialog( "close" );
  } else {
    $.mobile.changePage( "#error", { role: "dialog" } );
  }
});

The error dialog simply has a close button with data-rel="back" so that clicking it returns to the previous dialog allowing you to select a checkbox.

<div id="error" data-role="page" data-theme="e">
   <div data-role="header">
      <h1>Dialog Error</h1>
   </div>  
   <div data-role="content">          
      <p>Please select at least one checkbox first.</p>        
      <a id="errorOK" href="#"  data-role="button" data-rel="back">OK</a>
   </div>   
</div>