AnyChat技术支持论坛

标题: ie8浏览器中弹出层被视频插件遮住 [打印本页]

作者: abcd1234a 时间: 2015-11-19 16:45
标题: ie8浏览器中弹出层被视频插件遮住
本帖最后由 abcd1234a 于 2015-11-20 09:41 编辑

ie8浏览器里面弹出层被视频插件遮住，在弹出层里面添加了<iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; scrolling: no;" frameborder="0" allowTransparency="true" src="about:blank"> </iframe>无效，出现弹出层后，将视频插件设置为“position:relative;z-index:-1”也是无效，但是谷歌火狐视频插件不会遮住弹出层，这该怎么处理

1.png (97.25 KB, 下载次数: 4136)

QQ图片20151119173544.png (97.08 KB, 下载次数: 4152)

22.png (144.78 KB, 下载次数: 4230)

作者: 佰锐科技-李永星 时间: 2015-11-19 16:50
本帖最后由佰锐科技-李永星于 2015-11-19 16:59 编辑

您好，请参考：http://bbs.anychat.cn/forum.php? ... id=447&extra=page=3

<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来控制，这样弹出层就可以浮在控件上方。

作者: abcd1234a 时间: 2015-11-19 16:55

佰锐科技-李永星发表于 2015-11-19 16:50
您好，请参考：http://bbs.anychat.cn/forum.php?mod=viewthread&tid=447&extra=page=3

这样设置后还是无效

作者: 佰锐科技-李永星 时间: 2015-11-19 17:00

abcd1234a 发表于 2015-11-19 16:55
这样设置后还是无效

你直接复制我刚才改过的代码试一下

作者: abcd1234a 时间: 2015-11-19 17:38

佰锐科技-李永星发表于 2015-11-19 17:00
你直接复制我刚才改过的代码试一下

还是一样，你看下我在帖子上面重新传的图片，代码贴进去还是一样

作者: 佰锐科技-李永星 时间: 2015-11-19 19:44

abcd1234a 发表于 2015-11-19 17:38
还是一样，你看下我在帖子上面重新传的图片，代码贴进去还是一样

你有没有查看下你的视频窗口的样式，把视频窗口那段也贴出来看下。

作者: abcd1234a 时间: 2015-11-20 09:42

佰锐科技-李永星发表于 2015-11-19 19:44
你有没有查看下你的视频窗口的样式，把视频窗口那段也贴出来看下。

已上传，帖子里面第3张图片

作者: 佰锐科技-李永星 时间: 2015-11-20 10:07

abcd1234a 发表于 2015-11-20 09:42
已上传，帖子里面第3张图片

请参考demo的编写方式：<div id="AnyChatLocalVideoDiv" ></div>，去掉object标签试试

作者: abcd1234a 时间: 2015-11-20 10:56

佰锐科技-李永星发表于 2015-11-20 10:07
请参考demo的编写方式：，去掉object标签试试

那是在网页上生成的object标签，在源代码如下：
<div class="row">
   <div  class="col-lg-12 col-md-12 col-xs-12 form-group">
        <div id="AnyChatRemoteVideoDiv" class="video-content"></div>
   </div>
</div>
<div class="row anychat_posi">
   <div class="col-lg-8 col-md-8 col-xs-8">
        <div id="AnyChatLocalVideoDiv" class="video-content"></div>
   </div>
.......

作者: 佰锐科技-李永星 时间: 2015-11-20 11:16

abcd1234a 发表于 2015-11-20 10:56
那是在网页上生成的object标签，在源代码如下：

其他浏览器是正常的吗？

作者: abcd1234a 时间: 2015-11-20 11:23

佰锐科技-李永星发表于 2015-11-20 11:16
其他浏览器是正常的吗？

其他浏览器正常，就ie比较低版本会遮住

作者: 佰锐科技-李永星 时间: 2015-11-20 11:30

abcd1234a 发表于 2015-11-20 11:23
其他浏览器正常，就ie比较低版本会遮住

我看你代码是用bootstrap写的，bootstrap是基于html5的吧。再次你把我们的demo改下，在你的ie8下测试，看是不是还被遮挡。

作者: abcd1234a 时间: 2015-11-20 16:13

佰锐科技-李永星发表于 2015-11-20 11:30
我看你代码是用bootstrap写的，bootstrap是基于html5的吧。再次你把我们的demo改下，在你的ie8下测试，看 ...

还是一样，我不用bootstrap，只放以下代码：
弹窗
<div style="z-index: 10; position: absolute; top:0;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>
视频
<div id="AnyChatRemoteVideoDiv" class="video-content"></div>

<div id="AnyChatLocalVideoDiv" class="video-content"></div>

作者: 佰锐科技-李永星 时间: 2015-11-20 16:42
本帖最后由佰锐科技-李永星于 2015-11-20 17:51 编辑

abcd1234a 发表于 2015-11-20 16:13
还是一样，我不用bootstrap，只放以下代码：
弹窗

在我们的环境测试（IE10模拟IE8，firefox）是可以采用前面我提供的方式弹出窗口的。如果你在IE8设置确实是在上面的，那我提供一个变通的方式：当你弹出modal窗体时，隐藏视频窗口，如：GetID("ANYCHAT_VIDEO_LOCAL").style.visibility="hidden";
当你关闭modal窗体时，显示视频窗口，如：GetID("ANYCHAT_VIDEO_LOCAL").style.visibility="visible";

作者: abcd1234a 时间: 2015-11-25 16:13

佰锐科技-李永星发表于 2015-11-20 16:42
在我们的环境测试（IE10模拟IE8，firefox）是可以采用前面我提供的方式弹出窗口的。如果你在IE8设置确实 ...

可以了，增加那个visibilty属性控制就可以了，谢谢

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