在另一个原始jquery移动简单对话框上方显示原始jquery移动简单对话框

Question

请参阅附图

在我的页面中，我有主页图标。当我点击＆＃34; Home＆＃34;我将通过jQuery mobile简单对话框显示一个对话框。我成功实现了这一目标 我使用原始html模式简单的dislog（http://dev.jtsage.com/jQM-SimpleDialog/demos/blank.html）

当用户在简单对话框中单击“确定”按钮而未选中任何复选框时，我想通过jquery移动简单对话框显示警告对话框，如下所示

我想在select customer对话框上方显示此对话框。 我怎样才能做到这一点。

我试图创建jsfiddle示例，但设计有点难以创建。

当出现警告对话框时，选择客户对话框消失。 请给出任何建议。

Answer 1

更新：刚刚意识到您正在使用simpledialog插件而不是本机jQM对话框。

使用SimpleDialog2

ForSimpleDialog2请参阅我创建的fiddle。

在主jQM页面中，有一个链接用于启动复选框对话框，该对话框包含在HTML标记中作为内联内容：

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

单击“关闭对话框”按钮时，它会使用Omar的代码来检查是否选中了任何复选框。如果是，则只关闭返回主页面的对话框。如果没有选中，则会启动错误对话框：

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

使用本机jQM对话框完成相同的操作：

根据我对您问题的理解，我创建了一个fiddle演示链式对话框。

基本上，您可以在第一页单击链接按钮：

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

启动对话框。该对话框包括3个复选框和一个“提交”按钮：

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

当您单击“#dialogSubmit”时，它会使用Omar的代码来检查是否选中了任何复选框。如果是，则只关闭返回主页面的对话框。如果没有选中，则会启动错误对话框。

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

错误对话框只有一个关闭按钮，data-rel =“back”，这样点击它就会返回上一个对话框，允许你选择一个复选框。

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