jQuery在另一个模式对话框内打开一个模式对话框

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在第二个模态上为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" );

必须在代码（dialog.js或jquery-ui.js）中添加带有“ +”的行。

Answer 3

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

我所做的是使用孩子的打开功能关闭父级，然后使用孩子的关闭功能重新打开父级。 它是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
    }
}

}）;