我正在使用jQuery UI对话框进行模态弹出窗口.我的页面中还有一些iframe iFrame(z-Index = 1500)位于父页面的顶部(z-index = 1000).我从父页面打开模态对话框.我试图使用$(‘modal’)对话框(‘option’,’zIndex’,3000)设置z-index;但这不行.我也尝试了stack:true(将其放在顶部)和.dialog(‘moveToTop’),但它们似乎不起作用.
使用样式表:从“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
.wrap {宽度:100%;高度:100%}
我是一个iframe,我是邪恶的
解决方法
我使用
this post动态找到最大Z-index,然后在设计时分配它,如:
$(modal).dialog({ /* other properties */,zIndex: $.maxZIndex()+ 1,})