javascript JQuery 在另一个模态对话框中打开一个模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25101296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery open a modal dialog inside another modal dialog
提问by Gabriel
i'm using JQuery v2.1.1and JQuery UI v1.11.0, i'm trying to open a modal dialog inside another one, with the first (parent) dialog disabled.
我正在使用JQuery v2.1.1和JQuery UI v1.11.0，我试图在另一个对话框中打开一个模式对话框，第一个（父）对话框被禁用。
In both dialog the modal properties is true, but only the background in disabled.
在这两个对话框中，模态属性为真，但只有背景处于禁用状态。
This is the HTML:
这是 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>
And the JS:
和 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");
});
For test, i wrote the code at: http://jsfiddle.net/33PQj/
为了测试，我在以下位置编写了代码：http: //jsfiddle.net/33PQj/
Using JQuery UI 1.8.23works fine, but with the last stable release... not.
使用JQuery UI 1.8.23工作正常，但使用最后一个稳定版本......不是。
thanks in advance.
提前致谢。
PD: Here is an example working: http://jsfiddle.net/n725A/1/but, using JQuery UI 1.8.23 and JQuery 1.6.4 (also work with 1.8.3)
PD：这是一个工作示例：http: //jsfiddle.net/n725A/1/但是，使用 JQuery UI 1.8.23 和 JQuery 1.6.4（也适用于 1.8.3）
PD2: i accomplished a bad solution: http://jsfiddle.net/pj5Dg/1/with a non desired result
PD2：我完成了一个糟糕的解决方案：http: //jsfiddle.net/pj5Dg/1/没有想要的结果
回答by WhyNotHugo
The modal: falseon the second modal, and the first will still be accesible, while the background is not:
在modal: false第二模式和第一仍将是入店，而背景是不是：
回答by Gabriel
There is a fork in github with the solution, contribution of scottgonzalez (https://github.com/scottgonzalez/jquery-ui/commit/06e39d90a5e24c0ef1be771e962226210fdb098c).
github 中有一个 fork 解决方案，scottgonzalez 的贡献（https://github.com/scottgonzalez/jquery-ui/commit/06e39d90a5e24c0ef1be771e962226210fdb098c）。
Editing the dialog.js:
编辑 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" );
The lines with '+' must be added in the code (dialog.js or jquery-ui.js).
必须在代码中添加带有“+”的行（dialog.js 或 jquery-ui.js）。
回答by Darth Jon
I'm having the same problem - basically the child dialog is not being presented as modal even though the modal flag is set to true.
我遇到了同样的问题——基本上，即使模态标志设置为真，子对话框也不会显示为模态。
What I did was close the parent using the open function of the child, then re-opened the parent with the close function of the child. It is hack-o-rama, but gets the job done.
我所做的是使用孩子的 open 功能关闭父级，然后使用孩子的关闭功能重新打开父级。它是 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
}
}
});
});
