非弹出式的模态对话框的背景遮罩

   现在大家做网页的对话框的时候,大多倾向于AJAX技术,就是对话框与网页在同一个页面,用AJAX技术控制对话框的内容和对话框的显示,隐藏,在用这种方式时虽然大家都能很容易的把"对话框"浮在最上层,也可以让他自由拖动.但是,却不能达到传统的模态对话框的效果,那就是界面上的其它按钮呀,链接呀什么的,只要是没有被挡住就还是可以点击."达不到看得见,点不着的效果".

    一个可行的方法就是找一个遮罩层在对话框显示的时候盖在网页上,达到阻止点击的目的,常见的用于做遮罩的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>

 

试了一下,这样设置后基本上达到了想要的效果了,解决的方法也算是比较完美,各种浏览器都是可以支持的