Показать простой простой диалог jquery mobile поверх другого простого простого диалога jquery mobile

0

См. Прилагаемое изображение

Изображение 174551

На моей странице у меня есть значок дома. Когда я нажимаю "Главная", я покажу один диалог с помощью простого диалогового окна jQuery mobile. Я достиг этого успешно. Я использовал простой режим html raw dislog (http://dev.jtsage.com/jQM-SimpleDialog/demos/blank.html)

Когда пользователь нажимает кнопку ok в простом диалоге без какого-либо флажка, я хочу показать диалоговое окно с предупреждением через jquery mobile simple dialog, как показано ниже

Я хочу показать это диалоговое окно над диалогом выбора клиента. Как я могу это достичь.

Я попытался создать пример jsfiddle, но дизайн немного жестко не способен создать.

Когда появится диалоговое окно предупреждения, диалог клиента исчезнет. Пожалуйста, дайте любое предложение.

Изображение 174551

Теги:
jquery-mobile
simpledialog

1 ответ

2

UPDATE: просто понял, что вы используете плагин simpleedogog, а не собственный диалог jQM.

Использование SimpleDialog2

ForSimpleDialog2 увидеть эту скрипку я создал.

На главной странице jQM есть ссылка для запуска диалогового окна checkbox, которое включено в 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>

Когда вы нажимаете кнопку "Закрыть диалог", он использует код Омара, чтобы проверить, отмечены ли какие-либо флажки. Если они есть, он просто закрывает диалоговое окно, возвращающееся на главную страницу. Если ни один из них не установлен, он запускает диалоговое окно с ошибкой:

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

Я создал скрипку, демонстрирующую прикованные диалоги в соответствии с моим пониманием вашей проблемы.

В основном, с первой страницы вы нажимаете кнопку ссылки:

<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= "назад", чтобы щелчок по ней возвращался к предыдущему диалоговому окну, позволяя вам выбрать флажок.

<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>
  • 0
    var numChecked = $('#cBoxes :checkbox:checked').length; имел бы такой же эффект!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню