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

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集中注意力时,就出现了其他对话框.

这是我为你创造的小提琴.从第一个对话框打开对话框

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

我把下拉放在第一个对话框上,在更改事件时,我在第一个对话框上面打开了另一个对话框.