为什么要遮挡
跨浏览器的模式窗口实现通常采用div元素进行模拟,模式窗口的基本特性是要让页面上的其它部分失效,即不能点击、不能输入、不能...总之,不能响应用户的输入。
一般实现模式窗口通常会用到两个div,一个放置模式窗口的内容,当然这个div里面可以嵌套其它的div;另一个则用于遮挡页面中的其它部分(后者的 z-index低于前者)。两个div的模式窗口在firefox、chrome等浏览器中都能正常的工作,但在IE6中,由于select属于 window类型控件,它会“挡住”所有非window类型控件,因此用于遮挡页面的div纵有再高的z-index,也会被select挡在后面。虽然 IE7解决了这个BUG,但由于在国内IE6用户目前仍是主流,我们就需要探讨,在IE6下,如何让div看起来“遮挡”住了select控件。
解决方法
最有效的解决方案是用iframe替代原先的div来遮挡页面的其它部分,而显示窗口内容仍然用div,即div+iframe的组合。这基于 IE6中的一条奇怪的规则:虽说div直接盖不住select,但是div可以盖iframe,而iframe可以盖select。
实现方法
其实知道了解决方法,实现起来十分容易,具体可以参看select挡住div的5种解决方法 ,它其中还列举了其它一些方法,值得参考和思考。:)