object覆盖的div解决办法
2018-06-24 01:33:06来源:未知 阅读 ()
最近做个web项目,因为里面有个<object>的插件,弹出<div>对话框会被其遮盖,我做了个<iframe>标签,在弹框时,把<object>覆盖掉,再在iframe上放个<div>对话框。这是这个问题的解决思路。终于将这个问题解决掉了,我将思路分享给大家以供参考。
(一)首先给大家介绍一下object标签:W3school有解释
定义和用法
定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。
<object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。
浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。
而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。
总的来说object标签就是用来嵌入多媒体的。
(二)简单介绍几个object标签的重要属性:
classid -- 关联一个应用程序,执行嵌入内容的应用程序在windows系统中的唯一id(不能改变此id,否则程序将出现异常),
例如clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 -- Flash
data -- 规定对象使用的资源的 URL。
(三)object标签在IE上覆盖问题
查询相关资源后发现<object>在IE中是一个windowed element,即窗口元素,这些元素总是会被渲染在非窗口元素的上方,而iframe默认在object之上,唯一的解决方案就是使用iframe作为中间物,即用iframe覆盖object,再用div覆盖iframe。
<div class="dropdown"> <p>我是对话框</p> <iframe id="iframe" src="about:blank" frameborder="0" marginheight="0" marginwidth="0" style="position:absolute;visibility:inherit; top:0px;left:0px;width:100%; height:100%;z-index:-1; filter:alpha(opacity=0);"></iframe> </div> <div style="width: 950px;height: 400px;position: relative;z-index: 9;"> <object id="CmCaptureOcx" style="width: 100%; height:100%;" classid="clsid:3CA842C5-9B56-4329-A7CA-35CA77C7128D"> </object> </div>
注意:
1.div必须有特定的z-index且大于iframe的z-index,不能是auto或空;
2.iframe的z-index必须为负(之前一直设置为正值,虽然小于div的z-index,但一直不能被div遮盖),否则,div无法遮盖iframe;
3.iframe的top和left为0,且iframe的宽、高与div的宽高相等;
4.注意设置iframe的透明度为0.
5.如果页面有多处弹出框,可以使用js动态添加iframe。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:CSS清浮动方法总结
- DIV居中的经典方法 2020-06-13
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- CSS选择器 2020-05-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash