iFrame 上的 jQuery 模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1790865/
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 modal Dialog over iFrame
提问by ram
I am using jQuery UI dialog for modal popups. I have some iframes in my page as well. The iFrame (z-Index = 1500) sits on top of the parent page (z-index =1000). I open the modal dialog from the parent page. I am trying to set the z-index using $('modal').dialog('option','zIndex',3000); but this is not working. I also tried stack:true (to stack it on top), and .dialog( 'moveToTop' ) as well, but they don't seem to work.
我正在为模态弹出窗口使用 jQuery UI 对话框。我的页面中也有一些 iframe。iFrame (z-index = 1500) 位于父页面 (z-index = 1000) 的顶部。我从父页面打开模态对话框。我正在尝试使用 $('modal').dialog('option','zIndex',3000); 设置 z-index; 但这不起作用。我也尝试过 stack:true （将其堆叠在顶部）和 .dialog( 'moveToTop' ），但它们似乎不起作用。
Here is the code: Parent page:
这是代码： 父页面：
using style sheet : from "css/ui-darkness/jquery-ui-1.7.2.custom.css" using scripts: jquery-1.3.2.min.js && jquery-ui-1.7.2.custom.min.js
使用样式表：来自“css/ui-darkness/jquery-ui-1.7.2.custom.css”，使用脚本：jquery-1.3.2.min.js && jquery-ui-1.7.2.custom.min.js
<script type="text/javascript" language="javascript">
function TestModal() {
var modal = "<div id='modal'>Hello popup world</div>";
$(modal).dialog({
modal: true,
title: 'Modal Popup',
zIndex: 12000, // settin it here works, but I want to set it at runtime instead of setting it at design time
close: function() {
setTimeout(TestModal, 5000);
$(this).remove();
}
});
$('modal').dialog('option', 'zIndex', 11000); // these dont work
$('modal').dialog('moveToTop'); // these dont work
$('modal').dialog('option', 'stack', true); // these dont work
}
/** Run with defaults **/
$(document).ready(function() {
TestModal();
});
</script>
<div>
Hello World
<br />
</div>
<iframe src="blocker.htm" width="100%" height="100%" frameborder="0" scrolling="no" name="myInlineFrame"
style="z-index:10000;background-color:Gray;position:absolute;top:0px;left:0px" ALLOWTRANSPARENCY="false">
</iframe>
iframe : blocker.htm
iframe：blocker.htm
.wrap{width:100%;height:100%}
.wrap{width:100%;height:100%}
我是一个 iframe 而我是邪恶的采纳答案by ram
回答by Pawel Krakowiak
How about
怎么样
$('#modal').closest('div.ui-dialog').css('z-index', '3000')
jQuery UI Dialog renders a DIV with class ui-dialogand it becomes the parent of your original DIV, hence I used closest()to find it (not referencing it directly by class in case there are more dialogs on the page).
jQuery UI Dialog 使用ui-dialog类渲染一个 DIV，它成为原始 DIV 的父级，因此我使用了最接近的（）来找到它（如果页面上有更多对话框，则不直接按类引用它）。
回答by korro
Did you try $('modal').dialog('zIndex', 11000)?
你试了$('modal').dialog('zIndex', 11000)吗？
回答by Tracker1
I wrote an extension that will do what it is I think you are actually wanting...
我写了一个扩展，它会做我认为你真正想要的......
