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

admin

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

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


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

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

复制代码

或者：

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

复制代码

佰锐科技-李永星

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

复制代码

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

廖斌

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

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

admin

您好，截图看一下您实现出来的效果？

769133787

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

亲，在线等啊 ，着急啊

769133787

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

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

769133787

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

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

廖斌

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

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

769133787

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

我按照你的方法试了，没有效果，我的js处理方式是这样的，
jsp中有这样一个div浮层
<!-- 拍摄客户头像dialog弹出框浮层 -->
        <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

我按照你的方法试了，没有效果，我的js处理方式是这样的，
jsp中有这样一个div浮层
<!-- 拍摄客户头像dialog弹出框浮层 -->
        <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：浮层的元素动态添加，浮层要在视频窗口的上面，谢谢，如果我描述的不够清楚，请再告诉我，万分感谢！！！

admin

您好，如果是显示文字，可参考：http://bbs.anychat.cn/forum.php? ... =597&extra=page%3D4