在 jquery UI 对话框中，是否可以将模态对话框放在另一个模态对话框的顶部

本文介绍了在 jquery UI 对话框中，是否可以将模态对话框放在另一个模态对话框的顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个使用 jquery UI 对话框的模式对话框.我现在想在用户更改第一个对话框中的字段时弹出另一个对话框.两者都应该是模态的.

I have a modal dialog using jquery UI dialog. I now want to popup another dialog when i user changes a field in the first dialog. Both should be modal.

这可能吗，因为我尝试将这段代码放在那里，但似乎没有弹出任何内容.当从常规页面单击时，以下代码可以正常工作(其中带有 id 的选择控件:selectDropdownThatICanChange)但是如果我正在更改的同一个选择控件本身就是一个对话框，则对话框(打开")行什么也不做.更改事件触发并调用 open 方法，但没有弹出任何内容.

Is this possible as i tried putting this code there and nothing seems to popup. The following code works fine when click from a regular page (where the select control with id: selectDropdownThatICanChange) but if the same select control that i am changing is itself a dialog the dialog("Open") line does nothing. The change event fires and the open method gets called but nothing pops up.

$("#secondModalDialog").dialog({ resizable: false, height: 'auto', autoOpen: false, title: "Warning", width: 400, modal: true, buttons: { 'Close': function () { $("#secondModalDialog").dialog('close'); } } }); $('#selectDropdownThatICanChange').live("change", function () { $("#secondModalDialog").dialog('open'); });

这里是对话框(只是一个 div)

and here is the dialog (which is just a div)

<div id="secondModalDialog" style="display:none"> This is a test <br/> This is atest </div>

推荐答案

UI 对话框不是单例的 您可以打开任意数量的对话框.默认情况下，它们是堆叠的.但是当 Dialog 获得焦点时，它会出现在其他对话框的前面.

UI dialogs are not singleton You can open as many dialogs as you want. And by default they are stacked. but when Dialog get focused it came up infront of other dialogs.

这是我为您创建的小提琴.从第一个对话框打开对话框

here is fiddle i created for you. Open dialog from first dialog

// HTML: <div id="dialog-modal" title="Basic modal dialog"> Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content. <select id="dialogSelect"> <option>123</option> <option>234</option> </select> </div> <div id="another-dialog-modal" title="2nd Modal :O"> Second Modal yayyay </div> // JS: $( "#dialog-modal" ).dialog({ height: 300, modal: true, buttons: { Cancel: function() { $(this).dialog('close'); } } }); $("#dialogSelect").change(function(){ $( "#another-dialog-modal" ).dialog('open'); }); $( "#another-dialog-modal" ).dialog({ autoOpen: false, modal: true, buttons: { Cancel: function() { $(this).dialog('close'); } } });

我在第一个对话框上放了下拉菜单，在更改事件上我在第一个对话框上方打开了另一个对话框.

I've put drop down on first dialog and on change event I opened another dialog above the first dialog.