遮罩弹出效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西。这
种效果在网上很常见，例如： 空间浏览相册等。这种效果的好处就是，可以让用户聚焦
到弹出的菜单中。
神说，有代码的文章，应该有个 ，于是就有了 。
结构
首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上
面还有一个内容层。触发的按钮，我在这里用 来代替，并且使用 点击事件来演示。
那么我们的 结构就很明确了。
点击这里
效果增强版的
这里是正文内容
代码
对于遮罩效果的 代码是最关键的。遮罩用到了两个 ，一个作为背景，要覆盖整个
网页，另一个是内容显示层，通常要居中处理。
!"#$!%#&'$()#**+$))#**+$,-#.***$/0
'#1$!#*$2#*$!"#*3$4
!"#$()#5**!'$))#6**!'$!%#&'$!#5*+$,0!#0
5*!'$,-#.78$/0'#6$2#5*+$,02#015*!'$4
简单解释一下，首先要隐藏起来，之后用 9-,"触发显示。之后指定 !%的属性为
&'，因为这样，才能激活 !、2、:、,)、/0' 这些属性，同时可以设置
()、))为 **+来实现覆盖整个网页。通常情况下，一般用 -属性值来实现
这种效果，因为它的兼容性更好。但是在实际应用当中，当页面很长，往下滚动的时候，
使用 -遮罩层也会跟随滚动。对于内容层来说，比较简单，指定宽度和高度用负边
距来使其居中显示。
特别要注意一点，背景层的半透明使用的是 !"属性，因为使用这个属性可以更好的用
9-,"来控制。但是 &'、!"都是早期 ;<浏览器不支持的。
9-,"代码
分析一下遮罩的交互操作，无非就是点击弹出，然后点击一下遮罩，消失。那么就直接对
进行操作即可。
=>8-%>?
=>@@?>8-%>?
=>@@?> @!"@#@@4?$
=>@@?> @!"@#@@4?$
评论2