iFrame 上的 jQuery 模态对话框

Posted

技术标签:

【中文标题】iFrame 上的 jQuery 模态对话框【英文标题】:jQuery modal Dialog over iFrame 【发布时间】:2010-12-19 22:30:19 【问题描述】:

我正在为模态弹出窗口使用 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"   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 我是邪恶的

【问题讨论】:

更新:提供的 2 个解决方案不起作用。我正在使用west-wind.com/weblog/posts/876332.aspx 动态查找最大 Z 索引,然后在设计时为其分配 $(modal).dialog( /* other properties */ , zIndex: $.maxZIndex()+ 1, ) 【参考方案1】:

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

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

【讨论】:

【参考方案2】:

怎么样

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

jQuery UI Dialog 使用类 ui-dialog 呈现一个 DIV,它成为您原始 DIV 的父级,因此我使用 closest() 来找到它(不引用如果页面上有更多对话框,则直接按类进行。

【讨论】:

【参考方案3】:

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

【讨论】:

我试过 $('modal').dialog('option', 'zIndex', 11000);但不是 $('modal').dialog('zIndex', 11000);让我试试【参考方案4】:

我写了一个扩展,它可以做我认为你真正想要的......

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

【讨论】:

以上是关于iFrame 上的 jQuery 模态对话框的主要内容,如果未能解决你的问题,请参考以下文章

从 iframe 打开一个模态窗口到父窗口

模态对话框上的 Oracle Apex 设置页面项

Internet Explorer 中的 Iframe 内不显示模态弹出窗口

在 Jquery 模态窗口关闭时重置 iframe src

当使用 jQuery 可以看到引导模式时添加 iFrame

asp.netmvc5如何使用jquery模态对话框