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

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

正常情况下，通过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的半透明的显示效果没有问题
页: [1] 2 3
查看完整版本: 关于弹出DIV层被视频显示插件遮挡的解决方案