AnyChat技术支持论坛

标题: 关于弹出DIV层被视频显示插件遮挡的解决方案 [打印本页]

作者: admin 时间: 2014-1-7 17:46
标题: 关于弹出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
试了，没有效果，可以详述下吗？

作者: woody 时间: 2014-2-13 15:14
或者能否给个demo

作者: admin 时间: 2014-2-13 15:19
您好，只需要在弹出的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

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

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

作者: 空流璃 时间: 2014-3-14 18:31
如果是半透明的层在firefox 和 safari 怎么解决

作者: admin 时间: 2014-3-14 19:25
您好，半透明的层，您是如何设置DIV的CSS属性的？

作者: 空流璃 时间: 2014-3-14 19:30
<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
您好，这里面的关键点在于需要在<div>里面加一个<iframe>，并设置<iframe>的z-index属性，这样弹出来的div就不会被AnyChat视频显示插件遮挡。

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

作者: 空流璃 时间: 2014-3-14 19:43
我尝试加过 z-index 但是没有作用至于透明是继承父div的半透明的显示效果没有问题

作者: admin 时间: 2014-3-14 19:46
您好，有没有注意这一点：

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

作者: 空流璃 时间: 2014-3-14 20:18
也加过没有效果

作者: admin 时间: 2014-3-14 20:28
您好，您是说不透明，或是透明都是正常的，不会被遮挡，但是半透明就会被遮挡，是这样吗？

作者: fengcheAnychat 时间: 2014-11-22 11:31
我也遇到相同的问题，浮动可以浮动在视频上了，但透明不知怎么弄

作者: admin 时间: 2014-11-24 11:49
您好，如果是显示文字，可参考：http://bbs.anychat.cn/forum.php? ... =597&extra=page%3D4

作者: 769133787 时间: 2015-3-11 12:25
我按照你的方法试了，没有效果，我的js处理方式是这样的，
jsp中有这样一个div浮层

      <div id="winUpload" >
      </div>
当点击拍照按钮时，拍照完成后，会将这个浮层弹出，使用的是jQuery easyui的 dialog弹框，
//为浮层动态添加元素（添加多个元素，为了演示就不添加多个，只写下面一个）
$("#winUpload").append('<input type="button" onclick="uploadCancel()" value="关闭">');
//动态添加元素完毕后，将浮层以dialog的形式弹出，
$("#winUpload").dialog({
            modal: true,
            closable: true,
            draggable: true,
            resizable: true,
            width: 800,
            height: 300,
            minimizable: false,
            collapsible: false,
            title: "头像上传"
      });
//这个时候浮层是可以弹出的，但是弹出的效果就如1楼贴的图片一样，被object元素压在后面了，我火狐上可以在前面显示，谷歌和IE上都不行，都在后面
我按照你刚说的方法试了，如果用这种方式，则无法动态添加元素，就算是添加上了也还是在后面，希望你们能做一个符合我需求的demo：浮层的元素动态添加，浮层要在视频窗口的上面，谢谢，如果我描述的不够清楚，请再告诉我，万分感谢！！！

作者: 769133787 时间: 2015-3-11 12:25

admin 发表于 2014-3-14 19:38
您好，这里面的关键点在于需要在里面加一个，并设置的z-index属性，这样弹出来的div就不会被AnyChat视频显 ...

我按照你的方法试了，没有效果，我的js处理方式是这样的，
jsp中有这样一个div浮层

      <div id="winUpload" >
      </div>
当点击拍照按钮时，拍照完成后，会将这个浮层弹出，使用的是jQuery easyui的 dialog弹框，
//为浮层动态添加元素（添加多个元素，为了演示就不添加多个，只写下面一个）
$("#winUpload").append('<input type="button" onclick="uploadCancel()" value="关闭">');
//动态添加元素完毕后，将浮层以dialog的形式弹出，
$("#winUpload").dialog({
            modal: true,
            closable: true,
            draggable: true,
            resizable: true,
            width: 800,
            height: 300,
            minimizable: false,
            collapsible: false,
            title: "头像上传"
      });
//这个时候浮层是可以弹出的，但是弹出的效果就如1楼贴的图片一样，被object元素压在后面了，我火狐上可以在前面显示，谷歌和IE上都不行，都在后面
我按照你刚说的方法试了，如果用这种方式，则无法动态添加元素，就算是添加上了也还是在后面，希望你们能做一个符合我需求的demo：浮层的元素动态添加，浮层要在视频窗口的上面，谢谢，如果我描述的不够清楚，请再告诉我，万分感谢！！！

作者: 廖斌 时间: 2015-3-11 15:02

769133787 发表于 2015-3-11 12:25
我按照你的方法试了，没有效果，我的js处理方式是这样的，
jsp中有这样一个div浮层

您好，请问有试过在弹出层div中添加iframe吗？

作者: 769133787 时间: 2015-3-11 15:16

廖斌发表于 2015-3-11 15:02
您好，请问有试过在弹出层div中添加iframe吗？

在弹出层中加iframe我试过，但是iframe不能撑满整个div，所以只有在iframe覆盖的地方才在视频的上面，其他地方视频还是会覆盖掉的，

作者: 769133787 时间: 2015-3-11 15:18

廖斌发表于 2015-3-11 15:02
您好，请问有试过在弹出层div中添加iframe吗？

我想请问：如何将iframe撑满整个弹出的div，而且我的div中是有按钮和其他下拉框元素的，得保证这些元素可以出发事件，可以点击

作者: 769133787 时间: 2015-3-11 15:54

廖斌发表于 2015-3-11 15:02
您好，请问有试过在弹出层div中添加iframe吗？

亲，在线等啊，着急啊

作者: admin 时间: 2015-3-11 16:39
您好，截图看一下您实现出来的效果？

作者: 廖斌 时间: 2015-3-11 17:08

769133787 发表于 2015-3-11 15:18
我想请问：如何将iframe撑满整个弹出的div，而且我的div中是有按钮和其他下拉框元素的，得保证这些元素可 ...

您好，加iframe只是让div的层级比object高一些，内容显示还是在div上面，iframe内容可以为空。

作者: 佰锐科技-李永星 时间: 2015-7-1 11:50

<div style="z-index: 10; position: absolute; overflow: hidden;">
<iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left: 0; scrolling: no;" frameborder="0"> </iframe>
<div style="background-color: red;height:500px;">
弹出层测试 <br />
<a href="http://www.anychat.cn">AnyChat</a><br />
AnyChat float div demo <br />
AnyChat float div demo <br />
AnyChat float div demo <br />
AnyChat float div demo
</div>
</div>

复制代码

1、如上所示也可以实现弹出DIV而不被视频控件遮挡。其原理是把iframe的z-index值小于div的z-index的值，即把iframe放到div层下面。
2、其大小由“弹出层测试”这个div来控制，这样弹出层就可以浮在控件上方。

欢迎光临 AnyChat技术支持论坛 (http://bbs.anychat.cn/)