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

In jquery UI dialog, is it possible to put a modal dialog on top of another modal dialog

提问by leora

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.

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

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.

这是可能的，因为我尝试将这段代码放在那里，但似乎没有弹出任何内容。当从常规页面（其中带有 id：selectDropdownThatICanChange 的选择控件）单击时，以下代码工作正常，但如果我正在更改的相同选择控件本身是一个对话框，则 dialog("Open") 行不会执行任何操作。更改事件触发并调用 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');
});

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

这是对话框（这只是一个 div）

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

回答by Zahid Riaz

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.

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

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.

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

回答by MLM

You can open any number of modals and the default behavior is stacking in the order they were opened.

您可以打开任意数量的模态，默认行为是按照它们打开的顺序堆叠。

Demo: jsFiddle

演示：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');
        }
    }
});

回答by phil

Just wanted to let future finders know. It is possible to use z-index to put a modalWidget over another. I'm using jquery ui 1.10.3.

只是想让未来的发现者知道。可以使用 z-index 将 modalWidget 放在另一个之上。我正在使用 jquery ui 1.10.3。

The way you go about it is, you give your dialog constructor a dialog class.

你这样做的方式是，你给你的对话框构造函数一个对话框类。

$("#secondModalDialog").dialog({
    title: 'Title',
    dialogClass: 'ModalWindowDisplayMeOnTopPlease',
    width: 200,
    height: 200
});

Then in your CSS, you specify a higher z-index than the first dialog is using.

然后在你的 CSS 中，你指定一个比第一个对话框使用的更高的 z-index。

.ModalWindowDisplayMeOnTopPlease {
    z-index: 100;
}

You may need to check which one its using with firebug or some dev tool to check which z-index it was instanced with. My default z-index was 90 on the first modal Widget. The window code looked smthg like this:

您可能需要使用 firebug 或某些开发工具检查它使用的是哪个 z-index 来检查它是用哪个 z-index 实例化的。我的默认 z-index 在第一个模态小部件上是 90。窗口代码看起来像这样：

<div id="firstModalDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 737px;">
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>

回答by Royce Feng

As sushanth reddyindicated in the comments, set the z-index of the dialog:

正如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');
        }
    }
});

Reference: http://docs.jquery.com/UI/API/1.8/Dialog#option-zIndex

参考：http: //docs.jquery.com/UI/API/1.8/Dialog#option-zIndex