使用iframe快速解决IE6下弹出层被下拉列表遮挡问题

周五快下班的时候,收到一个后台研发提交的一个BUG:某君写的弹出层在IE6下被下拉列表遮挡了。

(左图为:未弹出选择层效果)

(左图为IE8下弹出层效果)

(左图为IE6下效果)

由于在IE6中,下拉列表拥有比较高权限,会把除frame外的元件遮挡,这是IE6的一个BUG,在IE7及以上版本已经修复。目前了解到只有两种方法可以解决:

1.自定义下拉列表组件;

2.使用比其更高权限的iframe进行遮挡,然后使iframe置于弹出层的下层。

由于时间紧,所以放弃了方法1。直接使用iframe对下拉列表进行遮挡。首先,跟踪页面(editsinglematterForSSDJ.html)<button id=”showmcBtn” type=”button” false;”><span>选择</span></button>找到触发元素事件:showMatterCategorySelect,在IE8上使用开发工具检索到事件来自editsinglematterForSSDJ.js文件的function showMatterCategorySelect(){ selectMatterCategoryTree.showDropDownTree();}函数,并找到初始化弹出层的initTree()方法:selectMatterCategoryTree.initTree(dropTreeParamObj);

由于不想深入变更弹出层的组件修改,所以直接在树层初始化后,对DOM进行操作,插入iframe使其遮挡下拉列表:$(‘#checkBoxTree_SelectContent’).prepend(“<iframe scrolling=’no’ frameborder=’0′ style=’background-color:transparent;z-index:-1;position:absolute;width:160px;height:100px;’><body></body></iframe>”);因为弹出树层初始化后生成的父级DIV的ID是“checkBoxTree_SelectContent”,所以在其里面插入了iframe并使用绝对定位。

经IE6测试通过,最终结果如下图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用JavaScript来实现将iframe弹出的功能。基本思路是在页面中动态创建一个div元素,将iframe作为其子元素,并设置其样式来实现弹出效果。 以下是一个简单的实现示例: ```html <!DOCTYPE html> <html> <head> <title>弹出iframe</title> <style> #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; } #iframe-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); overflow: auto; } </style> </head> <body> <button onclick="showIframe()">弹出iframe</button> <div id="mask"> <div id="iframe-container"> <iframe id="my-iframe" src=""></iframe> </div> </div> <script> function showIframe() { var mask = document.getElementById('mask'); var iframe = document.getElementById('my-iframe'); iframe.src = 'http://www.example.com'; mask.style.display = 'block'; } </script> </body> </html> ``` 在这个示例中,我们首先定义了一个id为mask的div元素,其样式设置为半透明黑色并且默认display为none,表示不可见。然后定义了另一个id为iframe-container的div元素,作为mask的子元素,并设置其样式为固定定位在页面中央、占据80%的宽高、有白色背景和阴影效果的容器。最后在iframe-container中嵌入了一个id为my-iframeiframe元素。 在JavaScript中,我们定义了一个showIframe函数,当点击按钮时调用该函数。函数首先获取mask和my-iframe元素,并将my-iframe的src属性赋值为要显示的页面地址。然后将mask的display设置为block,使其显示出来。这样就实现了弹出iframe的效果。 需要注意的是,由于涉及到跨域访问问题,如果要在iframe中显示其他网站的内容,需要确保该网站允许跨域访问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值