在jquery UI对话框中，是否可以在另一个模式对话框的顶部放置modal dialog
我有一个使用jquery UI对话框的modal dialog。 我现在想要在用户更改第一个对话框中的字段时弹出另一个对话框。 两者都应该是模态的。
这是可能的，因为我尝试将此代码放在那里，似乎没有任何弹出窗口。 从常规页面（具有id：selectDropdownThatICanChange的select控件）单击时，以下代码工作正常，但如果我正在更改的相同选择控件本身是对话框，则对话框（“打开”）行不执行任何操作。 触发更改事件并调用open方法，但不会弹出任何内容。
$("#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）
This is a test
This is atest
UI对话框不是单例您可以根据需要打开任意数量的对话框。 默认情况下，它们是堆叠的。 但是当Dialog集中注意力时，它出现在其他对话框的面前。
这是我为你创造的小提琴。 从第一个对话框打开对话框
// HTML: Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content. Second Modal yayyay // 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'); } } });
我把下拉放在第一个对话框上，在更改事件时，我在第一个对话框上方打开另一个对话框。
您可以打开任意数量的模态，默认行为是按打开顺序堆叠。
演示：jsFiddle
$('#dialog-modal').dialog({ height: 300, modal: true, buttons: { 'Another Modal': function() { $('#another-dialog-modal').dialog('open'); }, Cancel: function() { $(this).dialog('close'); } } }); $('#another-dialog-modal').dialog({ autoOpen: false, buttons: { Cancel: function() { $(this).dialog('close'); } } });
只是想让未来的发现者知道。 可以使用z-index将modalWidget放在另一个上。 我正在使用jquery ui 1.10.3。
你的方法是，你给对话框构造函数一个对话框类。
$("#secondModalDialog").dialog({ title: 'Title', dialogClass: 'ModalWindowDisplayMeOnTopPlease', width: 200, height: 200 });
然后在CSS中，指定比第一个对话框使用的更高的z-index。
.ModalWindowDisplayMeOnTopPlease { z-index: 100; }
您可能需要检查它与firebug或某个开发工具一起使用哪一个来检查它实例化的z-index。 我的默认z-index在第一个模态Widget上为90。 窗口代码看起来像这样smthg：
正如评论中指出的sushanth reddy ，设置对话框的z-index：
$("#secondModalDialog").dialog({ resizable: false, height: 'auto', autoOpen: false, title: "Warning", width: 400, modal: true, zindex: 1001, // Default is 1000 buttons: { 'Close': function () { $("#secondModalDialog").dialog('close'); } } });
参考： http ： //docs.jquery.com/UI/API/1.8/Dialog#option-zIndex