ie6 下select遮罩住弹出层解决办法

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

我们最常用的使用JS做DIV弹出层时，一般地在IE下是无法遮罩Select，这是很多开发者的难点，今天我们来介绍一个解决办法，利用iframe来操作。使用JS做DIV弹出层时，一般地在IE下是无法

我们最常用的使用JS做DIV弹出层时，一般地在IE下是无法遮罩Select，这是很多开发者的难点，今天我们来介绍一个解决办法，利用iframe来操作。

使用JS做DIV弹出层时，一般地在IE下是无法遮罩ActiveX控件的，同时在IE6下Select也遮罩不住。在IE中ActiveX默认永远显示在最顶层，因此通过设置Style的Z-Index属性也无法改变遮罩关系的。在信息系统软件中，许多场合由于性能、操作等原因，往往会使用ActiveX代替Html来完成功能

代码如下
var sd = XX.style.display; XX.style.display = "none"; ... //关闭弹出层后显示 XX.style.display = sd;

最容易想到的方法是在弹出DIV层前隐藏控件对应的object，关闭层后再显示出来。如果只是当个页面诚然这样简单，但如果存在多个Iframe嵌套的话，对于其他Iframe也存在控件的话就比较麻烦。

在IE6以后版本存在称之为shim的解决办法，基本思路是这样的，在当前页面动态创建一个iframe，其z-index比当前的要高，则这个iframe会呈现在最上方，然后将弹出的div的z-index设置比这个iframe的要高，此时弹出的div就能遮罩住ActiveX控件了，示意见如下简图（实际div是与iframe重合的）。

当然还需要设置一些必要地属性，比较关键是设置iframe的src属性为javascript:false;，并设置display为none，透明度为0。

代码如下

//popDiv是弹出层，nowindex是当前的z-index
popDiv.style.zIndex=nowindex+1;
//加一个iframe以遮住ActiveX
if($get("__iframeBodyCover" + winname )==null){
var iframeBodyCover = document.createElement("iframe");
        iframeBodyCover.id = "__iframeBodyCover"+winname;
        iframeBodyCover.style.cssText = "position:absolute;top:0;left:0;width:" + document.body.clientWidth+ "px; height:" + document.body.clientHeight + "px;background-color:#000000;filter:alpha(opacity=0);display:none;";
        iframeBodyCover.src ="javascript:false;";
        document.body.appendChild(iframeBodyCover);
}
//iframe的z-index比div的要低
$get("__iframeBodyCover" + winname ).style.zIndex = nowindex;

当然这时候在IE6下自然也能遮罩住select了，有需要的朋友可以参考一下。

上一篇：javascript 电话号码格式验证代码
下一篇：js 主流浏览器相关参数说明

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

node+express+

js点亮星星评

鼠标滑过出

查找Oracle高

PHP开发者必

精彩文章

热点文章

ie6 下select遮罩住弹出层解决办法

热门标签

赞助商链接