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

Gabriel 发表于 Dev

加布里埃尔

我正在使用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/，结果不理想

加布里埃尔

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）中添加带有“ +”的行。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。