一个可行的方法就是找一个遮罩层在对话框显示的时候盖在网页上,达到阻止点击的目的,常见的用于做遮罩的HTML元素有IMG,DIV等,用IMG加载一个透明的图片(一般来说是gif)或者作为DIV的背景图片,这样的确是实现了"看得见,点不着的效果",可是俗话说得好"林子大了,什么鸟都有",偏偏就有个叫IE6的,而且是占绝对数量用户群的一个浏览器,在里面下拉框(select)居然不受z-index控制,不管什么情况下始终"倔强"地出现在最顶层,挡也挡不住,被号称IE6最精典的BUG之一.曾经想尽一切办法想要解决这个问题,还是不能够搞定,咱没必要为了一个M$自己的BUG去浪费自己的时间和精力.我想很多程序员应该都有这种想法吧.
直接不行咱还可以曲线救国,你不是始终要在最顶层么,咱不能把你摁下去还不能把你变没了?
1 element.style.display="none"; // 不需要占位
2 // or
3 element.style.display="hidden"; // 如果需要占位的话
让你消失在视线中.呵呵,这下整个世界终于清静了.再也看不到烦人的下拉框了.这种方式着实流行了好一阵,特别是好几个用得比较多的日期选择控件就是这么做的,包括现在一直都有采用这种方式.
可是每次用的时候都得把网页上所有的下拉框都给隐藏了,对于一个完美主义的程序员来说,这点显然是不够的,这还不用说有些眼睛比较"毒"的用户,总是能看得到这些小的变化,还死死的抓着这个问题不放.
既然这两个元素都搞不定,那么能不能换一个别的呢?大家可能知道,html里面有个叫iframe的元素,这个元素比那个select更猛,能够把下拉框也给盖住,基本上满足了我们的要求,看来这个可行.我们知道透明遮罩其实就是遮罩层的alpha滤镜的值为0,在mozilla系都有一个opacity或者类似的属性可以设置所作用的元素的alpha滤镜的值,M$的IE系列貌似没有一个直接的属性可以使用,但是却提供了一个filter支持alpha滤镜.
1 <iframe style="z-index:1000;filter: Alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;border:0;width:800px;height:600px;"></iframe>
试了一下,这样设置后基本上达到了想要的效果了,解决的方法也算是比较完美,各种浏览器都是可以支持的