Demo: jsFiddle

Question

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

这是否可行，因为我尝试将此代码放在那里，似乎没有任何弹出窗口。从常规页面（具有id：selectDropdownThatICanChange的选择控件）单击时，以下代码工作正常，但如果我正在更改的相同选择控件本身是对话框，则对话框（“打开”）行不执行任何操作。触发change事件并调用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

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 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

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

您的方法是，为对话框构造函数提供一个对话框类。

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

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

.ModalWindowDisplayMeOnTopPlease {
    z-index: 100;
}

您可能需要检查它与firebug或某个开发工具一起使用哪一个来检查它实例化的z-index。我的默认z-index在第一个模态Widget上为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 4

在评论中指出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

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

4 个答案:

Demo: jsFiddle