Javascript初学者的困惑——让div遮挡住select

为什么要遮挡

跨浏览器的模式窗口实现通常采用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种解决方法，它其中还列举了其它一些方法，值得参考和思考。:)