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

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

这是我为你创建的 fiddle 。 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');
        }
    }
});

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