在jQuery UI对话框中，是否可以在另一个模式对话框的顶部放置一个模式对话框 [英] In jquery UI dialog, is it possible to put a modal dialog on top of another modal dialog

问题描述

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

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.

这是可能的，因为我尝试将这段代码放在那里，但似乎没有任何弹出窗口.从常规页面(ID为select的选择控件:selectDropdownThatICanChange)中单击时，以下代码可以正常工作，但是如果我要更改的同一选择控件本身是一个对话框，则dialog("Open")行不会执行任何操作.发生更改事件，并且调用了open方法，但未弹出任何消息.

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.

$("#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)

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

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

推荐答案

UI对话框不是单例的，您可以根据需要打开任意数量的对话框.默认情况下，它们是堆叠的.但是当Dialog专注时，它出现在其他对话框的前面.

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.

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

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.

这篇关于在jQuery UI对话框中，是否可以在另一个模式对话框的顶部放置一个模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！