div层遮罩效果原理实现

我们都知道windows窗口是由a-z序的层结构显示的.同样网页也是这种层次结构.style中z-index(通常称z序)属性决定层的位置.默认 z-index:-1是最底层.通常最底层是我们的页面的主要构架和内容.如果我们要使用自定义的窗口/对话框,则应该z-index>-1.但是这样我们设计的一个非模态的对话框/窗口,焦点可以被自定义窗口以外的元素获焦.其实我们理解窗口是以"层"为结构的道理之后,很容易可以想到在网页最底层与自定义窗口框之间再插入一个"层",使这个"层"完全笼罩在最底层之上而居于对话框之下,所为"完全笼罩"也就是大小能遮住最底层的内容(其目的是为了让最底层不能获焦),为了能让"层"起作用,必须设置其背景颜色,否则层无效.这样页面的最底层就被笼罩层屏蔽了,由于自定义窗口层在笼罩层之上,所以现在页面中只能看到笼罩层和自定义窗口层了,这样最底层都看不见了又怎么获焦呢.嘿嘿.可能我们使用自定义窗口的同时还希望能看到最底层内容,这时我们可以将笼罩层设置成透明的,这样最底层的内容就显示出来了,只是在自定义窗口返回前最底层无法获焦..至此,我们的模态对话框完成了..


步骤:
1.首先.做好自定义的窗口/对话框层.并将其隐藏style.display=none
2.制作笼罩层.插入div,设置其宽/高大于最底层宽/高,完全笼罩在最底层上面,设置其透明度alpha(opacity=0)（IE使用filter: alpha(opacity=60)）,并将其隐藏style.display=none.
3.调用对话框时同时将两个层同时显示出来
4.关闭对话框时同时将两个层隐藏