Question

我正在使用 JQuery v2.1.1 和 JQuery UI v1.11.0 ，我试图在另一个内部打开一个模式对话框，第一个（父）对话框已禁用。

在两个对话框中，模态属性都为true，但只有后台处于禁用状态。

这是HTML：

<div id="dialog-first" title="1st Modal">
    First Modal
    <input type="text" id="onetext"/>
</div>

<div id="dialog-second" title="2nd Modal">
    Second Modal
</div>

和JS：

$( "#dialog-first" ).dialog({
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$( "#dialog-second" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$("#onetext").dblclick(function() {
    $("#dialog-second").dialog("open");
});

为了测试，我在http://jsfiddle.net/33PQj/

编写了代码

使用 JQuery UI 1.8.23 工作正常，但最后一个稳定版本...没有。

提前感谢。

PD：这是一个工作示例：http://jsfiddle.net/n725A/1/但是，使用JQuery UI 1.8.23和JQuery 1.6.4（也适用于1.8.3）

PD2：我完成了一个错误的解决方案：http://jsfiddle.net/pj5Dg/1/带有非期望的结果

Answer 1

第二个模态上的modal: false，第一个仍然可以访问，而背景不是：

http://jsfiddle.net/n725A/1/

Answer 2

在github中有一个解决方案，scottgonzalez（https://github.com/scottgonzalez/jquery-ui/commit/06e39d90a5e24c0ef1be771e962226210fdb098c）的贡献。

编辑dialog.js：

  this._position();
  this._createOverlay();
  this._moveToTop( null, true );
+
+ // Ensure the overlay is moved to the top with the dialog, but only when
+ // opening. The overlay shoudln't move after the dialog is open so that
+ // modeless dialogs opened after the modal dialog stack properly.
+ if ( this.overlay ) {
+     this.overlay.css( "z-index", this.uiDialog.css( "z-index" ) - 1 );
+ }
+
  this._show( this.uiDialog, this.options.show, function() {
  that._focusTabbable();
  that._trigger( "focus" );

＆＃39; +＆＃39;必须在代码中添加（dialog.js或jquery-ui.js）。

Answer 3

我遇到了同样的问题 - 即使将模态标志设置为true，基本上子对话框也不会显示为模态。

我所做的是使用子项的open函数关闭父项，然后使用子项的close函数重新打开父项。这是hack-o-rama，但是完成了工作。

$( "#dialog-second" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
       },
    open: function (event, ui) {
        $( "#dialog-first" ).dialog("close");  // close parent
    },
    close: function (event, ui) {
        $( "#dialog-first" ).dialog("open"); // open parent
    }
}

}）;

JQuery在另一个模态对话框中打开一个模态对话框

3 个答案: