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

Question

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

这可能吗，因为我尝试将这段代码放在那里，但似乎没有弹出任何内容。当从常规页面单击时，以下代码可以正常工作（其中带有 id 的选择控件：selectDropdownThatICanChange）但是如果我正在更改的同一个选择控件本身就是一个对话框，则对话框（“打开”）行什么也不做。更改事件触发并调用 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）

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

Answer 1

只是想让未来的发现者知道。可以使用 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 实例化的。在第一个模态小部件上，我的默认 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>

Answer 2

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

Demo: 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');
        }
    }
});

Answer 3

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

这是我为您创建的小提琴。 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');
        }
    }
});

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

Answer 4

按照cmets中的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