iFrame 上的 jQuery 模式对话框

Question

我正在使用 jQuery UI 对话框来显示模式弹出窗口。我的页面中也有一些 iframe。 iFrame (z-Index = 1500) 位于父页面 (z-index = 1000) 的顶部。我从父页面打开模式对话框。我正在尝试使用 $('modal').dialog('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，我是邪恶的

Answer 1

我正在使用this post动态查找最大 Z 索引，然后在设计时分配它，如下所示:

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