Question

我正在使用jQuery UI对话框进行模态弹出窗口。我的页面中也有一些iframe。 iFrame（z-Index = 1500）位于父页面的顶部（z-index = 1000）。我从父页面打开模态对话框。我试图使用$（'modal'）设置z-index。对话框（'option'，'zIndex'，3000）;但这不起作用。我也尝试过stack：true（将其叠加在顶部）和.dialog（'moveToTop'），但它们似乎不起作用。

这是代码：父页面：

使用样式表：来自“css / ui-darkness / jquery-ui-1.7.2.custom.css” 使用脚本：jquery-1.3.2.min.js＆amp;＆amp;的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，我很邪恶

Answer 1

我正在使用this post动态查找最大Z-index，然后在设计时分配它：

$(modal).dialog({ /* other properties */ , zIndex: $.maxZIndex()+ 1, })

Answer 2

怎么样

$('#modal').closest('div.ui-dialog').css('z-index', '3000')

jQuery UI Dialog使用类 ui-dialog 呈现DIV，它成为原始DIV的父级，因此我使用 nearest（）来查找它（不是引用它直接由类，以防页面上有更多的对话框。）

Answer 3

你试过$('modal').dialog('zIndex', 11000)吗？

Answer 4

我写了一个扩展，它会做我认为你真正想要的东西......

http://plugins.jquery.com/project/jquery-framedialog

jQuery模式对话框iFrame

4 个答案: