См. Прилагаемое изображение
На моей странице у меня есть значок дома. Когда я нажимаю "Главная", я покажу один диалог с помощью простого диалогового окна jQuery mobile. Я достиг этого успешно. Я использовал простой режим html raw dislog (http://dev.jtsage.com/jQM-SimpleDialog/demos/blank.html)
Когда пользователь нажимает кнопку ok в простом диалоге без какого-либо флажка, я хочу показать диалоговое окно с предупреждением через jquery mobile simple dialog, как показано ниже
Я хочу показать это диалоговое окно над диалогом выбора клиента. Как я могу это достичь.
Я попытался создать пример jsfiddle, но дизайн немного жестко не способен создать.
Когда появится диалоговое окно предупреждения, диалог клиента исчезнет. Пожалуйста, дайте любое предложение.
UPDATE: просто понял, что вы используете плагин simpleedogog, а не собственный диалог jQM.
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>"
});
}
});
Я создал скрипку, демонстрирующую прикованные диалоги в соответствии с моим пониманием вашей проблемы.
В основном, с первой страницы вы нажимаете кнопку ссылки:
<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>
var numChecked = $('#cBoxes :checkbox:checked').length;
имел бы такой же эффект!