关于弹出DIV层被视频显示插件遮挡的解决方案

admin · 发表于 2014-1-7 17:46:04

正常情况下，通过JavaScript脚本弹出一个DIV层会被视频显示插件遮挡：

这是由于浏览器的插件具有较高的优先级，所以会遮挡DIV元素。

解决方案：
可以在需要弹出的DIV层中加一个iframe，在这里只是借助iframe的优先级，使DIV层的优先级可以高过控件，就能使DIV的层显示在视频显示插件之上。为了不影响DIV的显示，这个iframe可以是空内容的，也可以不显示出来（hide），如：

<div id="menu" style="position:absolute;top:300px; left:500px; width:320px; height:240px; background-color:#6699cc;">
<table>
<tr><td height="30px">测试</td></tr>
</table>
<iframe style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:9999; filter='Alpha(style=0,opacity=0)';"></iframe>
</div>

复制代码

或者：

<iframe frameborder=0 scrolling=no style="background-color:transparent; position: absolute; z-index: 9999; width: 100%; height: 100%; top: 0;left:0;"></iframe>

复制代码

woody · 发表于 2014-2-13 15:14:09

试了，没有效果，可以详述下吗？

woody · 发表于 2014-2-13 15:14:29

或者能否给个demo

admin · 发表于 2014-2-13 15:19:22

您好，只需要在弹出的DIV层里面加入

<iframe style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:9999; filter='Alpha(style=0,opacity=0)';"></iframe>

复制代码

即可。

廖斌 · 发表于 2014-2-13 18:07:45

admin 发表于 2014-2-13 15:19
您好，只需要在弹出的DIV层里面加入即可。

另外要注意一点就是弹出的div需要设置position:absolute;属性

空流璃 · 发表于 2014-3-14 18:31:16

如果是半透明的层在firefox 和 safari 怎么解决

admin · 发表于 2014-3-14 19:25:07

您好，半透明的层，您是如何设置DIV的CSS属性的？

空流璃 · 发表于 2014-3-14 19:30:56

<div style="display: block; height: 958px; width: 1423px;" id="winmask">
<iframe scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="width: 100%; height: 100%; position: absolute;background: rgb(0,0,0); z-index:9999;" src="kongbai.jsp"></iframe>
</div>

#winmask {
background: none repeat scroll 0 0 #000000;
left: 0;
opacity: 0.6;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}

kongbai.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
  </head>
  <body bgcolor="#000">
  </body>
</html>

admin · 发表于 2014-3-14 19:38:15

您好，这里面的关键点在于需要在<div>里面加一个<iframe>，并设置<iframe>的z-index属性，这样弹出来的div就不会被AnyChat视频显示插件遮挡。

至于您所希望的将<iframe>在firefox里面实现半透明效果，则可以在网上查询一下相关的css设置方法。

空流璃 · 发表于 2014-3-14 19:43:20

我尝试加过 z-index 但是没有作用至于透明是继承父div的半透明的显示效果没有问题

		自动登录	找回密码
密码			立即注册

关于弹出DIV层被视频显示插件遮挡的解决方案

相关帖子