隐藏在 ASP.net 中叠加层后面的模态 jQuery 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16170157/
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
Modal jQuery dialog hidden behind overlay in ASP.net
提问by lawphotog
I am developing some Jquery dialog and found the dialog was hidden when I set Modal: true. When setting Modal: false, I found everything works as expected. Hope someone can help me.
我正在开发一些 Jquery 对话框，发现当我设置 Modal: true 时该对话框被隐藏了。当设置 Modal: false 时，我发现一切都按预期工作。希望可以有人帮帮我。
<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" />
<div id="dialog">
<h1>Test</h1>
<asp:Button ID="btnClickfromDialog" runat="server" Text="Button" />
</div>
$(function () {
$("#btnOpendialog").click(function (e) {
$("#dialog").dialog("open");
return false;
});
$("#dialog").dialog({
height: 200,
modal: true,
autoOpen: false,
open: function () {
$(this).parent().appendTo($("form:first"));
}
});
});
回答by lawphotog
I fixed it. There aren't many people who're complaining about this issue. Is it just me? Anyway, here is how I fixed it. Quite simple when you know how.
我修好了它。抱怨这个问题的人并不多。只有我吗？无论如何，这就是我修复它的方法。当你知道怎么做时，这很简单。
.ui-widget-overlay
{
z-index: 0;
}
回答by ban-geoengineering
I tried the accepted answer and it appeared to work in some situations, but not others. Using the same idea, this is the code I came up with this code...
我尝试了接受的答案，它似乎在某些情况下有效，但在其他情况下无效。使用相同的想法，这是我想出的代码...
.ui-dialog {
z-index: 9999 !important;
}
.ui-dialog {
z-index: 9999 !important;
}
...which is based on the fact that the z-index of .ui-widget-overlayis 9998.
......这是基于这样的事实的z-index的.ui-widget-overlay是9998。
Additionally, to fix the problem where the overlay does not cover the full height of your page (as .ui-widget-overlayonly has a height of 1000%), I came up with this:
此外，为了解决叠加层没有覆盖页面的整个高度（因为.ui-widget-overlay只有 高度1000%）的问题，我想出了这个：
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
回答by Eddie Rozenblat
You need to stop using appendTo like this and use the new dialog option "appendTo"
您需要停止像这样使用 appendTo 并使用新的对话框选项“appendTo”
like this:
像这样：
$( ".selector" ).dialog({ appendTo: "#someElem" });
Taken from jquery-ui documentation http://api.jqueryui.com/dialog/#option-appendTo
取自 jquery-ui 文档 http://api.jqueryui.com/dialog/#option-appendTo
回答by AlexJ
All I need was z-index:1applied to ui-dialog. There was no z-indexI could apply to ui-widget-overlayto make this work.
我需要的只是z-index:1应用于ui-dialog. 没有z-index我可以申请ui-widget-overlay使这项工作。
I'm doing this in Wordpress including the 'jquery', 'jquery-ui-core', 'jquery-ui-dialog' scripts. Here's my relevant css:
我在 Wordpress 中执行此操作，包括“jquery”、“jquery-ui-core”、“jquery-ui-dialog”脚本。这是我的相关css：
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background: #aaaaaa;
opacity: 0.3;
}
.ui-dialog {
background-color: #FFFFFF;
overflow: hidden;
z-index:1;
}
回答by ClearCloud8
Can you create a jsFiddle to recreate this issue outside your environment? If not, here are some ideas off the top of my head:
你能创建一个 jsFiddle 来在你的环境之外重现这个问题吗？如果没有，这里有一些我的想法：
Put your javascript inside of a document ready block, like so:
将您的 javascript 放在文档就绪块中，如下所示：
$(document).ready(function() {
// Your javascript here...
});
Change btnOpendialog to be a non-ASP.NET server control. Since all it does is open the jquery dialog, it has no need to be a server control. Change it to this:
将 btnOpendialog 更改为非 ASP.NET 服务器控件。由于它所做的只是打开 jquery 对话框，因此它不需要是服务器控件。改成这样：
<input type="button" id="btnOpendialog" value="Button" />
