您的位置:首页 > Web前端 > HTML

Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题

2011-08-22 13:19 1041 查看
直接贴一段源码吧:

if (typeof (this.mask) == "undefined") {
this.mask = document.createElement("div");
this.mask.id = this.oim.__maskid + "_mask";
this.mask.style.position = "absolute";
this.mask.style.width = this.maskWidth + "px";
this.mask.style.height = this.maskHeight + "px";
this.mask.style.left = this.maskXp + "px";
this.mask.style.top  = this.maskYp + "px";
this.mask.style.backgroundImage = "url(" + this.src + ")";
this.mask.style.backgroundRepeat = "no-repeat";
this.mask.style.display = "none";
this.mask.style.zIndex = 1000;
//TO cover other controls like select when run on IE6
this.mask.innerHTML = '<iframe style=\'width:100%;height:100%;position:absolute;z-index:-1;filter:alpha(opacity=0);border:none\' frameborder=\'no\' border=\'0\' ></iframe>';
document.body.appendChild(this.mask);
}

相信里面的注释你也能看懂。

 

google搜索:IE6 遮罩 mask select控件

相信你会得到很多的相关文章。

其中很多都提到要解决隐藏select控件问题,有两种方法。

第一种,写一段JS主动隐藏select控件

如:http://news.cnblogs.com/q/20390/

这篇文章里面给出了常用的隐藏控件代码。

而且里面有一处代码吸引了我:

 

//向div中添加table
var table = document.createElement("table");
msgObj.appendChild(table);


这为后面的最终实现奠定了基础。PS:主要是我JS没学,现整的。

第二种,全屏遮罩!

如:http://bbs.blueidea.com/thread-2941022-1-4.html

PS:这种挺雷的!有点全城热恋的感觉。为什么呢,因为这种场合用的很少,但技术上可赞的。

第三种,最靠谱的方法,使用iframe嵌套

参考:http://blog.csdn.net/chinapi_hzh/article/details/6036973

还有个帖子,我没收藏,也是CSDN里的,内容大概是作者终于闲下来了,想想工作遇到的这个问题一直都在思索。中间提到了主动隐藏法的消耗问题,再次肯定了利用iframe。但是没有实现,估计也是还没解决呢。

 

其实大概的思路还是如前人所述:在div里嵌套个iframe。

因为IE6下,div遮挡不了select。但是iframe可以遮挡select。

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ie html ext iframe table border
相关文章推荐