jquery ui - 嵌套Dialog z-index问题

时间:2011-12-02 08:17:35

标签: jquery jquery-ui z-index jquery-ui-dialog

我有一个显示表格的对话框,当我点击“删除”按钮时,我会弹出另一个对话框要求确认。目前这在第一次工作正常,但如果我第二次单击“删除”按钮,删除对话框将显示在后面第一个表格对话框,因此它实际上对用户不可见。

我尝试为两个对话框设置z-index,但我不知道为什么它只在第一次工作

以下是我的脚本示例:

   // The 1st dialog
   var $detaildialog = $('#tableplaceholder').dialog({
        autoOpen: false,
        modal: true,
        width: '800',
        height: 'auto'

    });
   // Some steps to set the url.. then open the dialog
   $detaildialog.load(url, function () {

            $('#loading').hide();
            $detaildialog.dialog('open');
        });

   // Then, when delete action is called, open the second dialog
   fnOnDeleting: function (tr, id, fnDeleteRow) {
            var $dialog = $('#checkdeletedialog').dialog({
                autoOpen: false,
                modal: true,
                title: 'Delete Confirmation',
                zIndex: 90000
            });
            $dialog.dialog('open');
        }

我在这里做错了什么?

感谢任何帮助..谢谢:)

1 个答案:

答案 0 :(得分:6)

将第二个对话框的“stack”属性设置为true。

function (tr, id, fnDeleteRow) {
        var $dialog = $('#checkdeletedialog').dialog({
            autoOpen: false,
            modal: true,
            stack: true,
            title: 'Delete Confirmation'
        });
        $dialog.dialog('open');
    }

更多信息here

编辑:我们也遇到了模式对话框在打开一次后表现奇怪的问题。我们发现在关闭时“销毁”对话框可以解决问题,例如

var $dialog = $('#checkdeletedialog').dialog({
        autoOpen: false,
        modal: true,
        stack: true,
        title: 'Delete Confirmation',
        close: function() {
            $(this).dialog('destroy');
        }
    });