设为首页收藏本站

AnyChat技术支持论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 22338|回复: 23

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

[复制链接]

242

主题

2960

帖子

8923

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8923
发表于 2014-1-7 17:46:04 | 显示全部楼层 |阅读模式
正常情况下,通过JavaScript脚本弹出一个DIV层会被视频显示插件遮挡: 2.jpg
这是由于浏览器的插件具有较高的优先级,所以会遮挡DIV元素。


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

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

使用道具 举报

16

主题

55

帖子

256

积分

中级会员

Rank: 3Rank: 3

积分
256
发表于 2014-2-13 15:14:09 | 显示全部楼层
试了,没有效果,可以详述下吗?
回复 支持 反对

使用道具 举报

16

主题

55

帖子

256

积分

中级会员

Rank: 3Rank: 3

积分
256
发表于 2014-2-13 15:14:29 | 显示全部楼层
或者能否给个demo
回复 支持 反对

使用道具 举报

242

主题

2960

帖子

8923

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8923
 楼主| 发表于 2014-2-13 15:19:22 | 显示全部楼层
您好,只需要在弹出的DIV层里面加入
  1. <iframe style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:9999; filter='Alpha(style=0,opacity=0)';"></iframe>
复制代码
即可。
回复 支持 反对

使用道具 举报

5

主题

1269

帖子

3677

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3677
发表于 2014-2-13 18:07:45 | 显示全部楼层
admin 发表于 2014-2-13 15:19
您好,只需要在弹出的DIV层里面加入即可。

另外要注意一点就是弹出的div需要设置position:absolute;属性
回复 支持 反对

使用道具 举报

0

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2014-3-14 18:31:16 | 显示全部楼层
如果是半透明的层 在firefox 和 safari  怎么解决
回复 支持 反对

使用道具 举报

242

主题

2960

帖子

8923

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8923
 楼主| 发表于 2014-3-14 19:25:07 | 显示全部楼层
您好,半透明的层,您是如何设置DIV的CSS属性的?
回复 支持 反对

使用道具 举报

0

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 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>
回复 支持 反对

使用道具 举报

242

主题

2960

帖子

8923

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8923
 楼主| 发表于 2014-3-14 19:38:15 | 显示全部楼层
您好,这里面的关键点在于需要在<div>里面加一个<iframe>,并设置<iframe>的z-index属性,这样弹出来的div就不会被AnyChat视频显示插件遮挡。

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

回复 支持 反对

使用道具 举报

0

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2014-3-14 19:43:20 | 显示全部楼层
我尝试加过 z-index  但是没有作用  至于透明是继承 父div的  半透明的显示效果没有问题
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|AnyChat ( 粤ICP备13022410号-1 )  

GMT+8, 2020-9-24 01:00 , Processed in 0.233745 second(s), 29 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表