使用jQuery制作遮罩层弹出效果的极简实例分享
客户的网站上突然需要一个遮罩弹窗效果，也可以称作暗箱之类的，具体效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见，例如：QQ空间浏览相册等。这种效果的好处就是，可以让用户聚焦到弹出的菜单中。
神说，有代码的文章，应该有个Demo，于是就有了Demo。
HTML结构
首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上面还有一个内容层。触发的按钮，我在这里用div来代替，并且使用click点击事件来演示。那么我们的HTML结构就很明确了。
<divclass="click">点击这里</div> <divclass="click1">效果增强版的</div> <divclass="bg"></div> <divclass="content">这里是正文内容</div>
CSS代码
对于遮罩效果的CSS代码是最关键的。遮罩用到了两个div，一个作为背景，要覆盖整个网页，另一个是内容显示层，通常要居中处理。
.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}
简单解释一下，首先要隐藏起来，之后用jQuery触发显示。之后指定position的属性为fixed，因为这样，才能激活top、left、bottom、right、z-index这些属性，同时可以设置width、height为100%来实现覆盖整个网页。通常情况下，一般用absolute属性值来实现这种效果，因为它的兼容性更好。但是在实际应用当中，当页面很长，往下滚动的时候，使用absolute遮罩层也会跟随滚动。对于内容层来说，比较简单，指定宽度和高度用负边距来使其居中显示。
特别要注意一点，背景层的半透明使用的是opacity属性，因为使用这个属性可以更好的用jQuery来控制。但是fixed、opacity都是早期IE浏览器不支持的。
jQuery代码
分析一下遮罩的交互操作，无非就是点击弹出，然后点击一下遮罩，消失。那么就直接对CSS进行操作即可。
$(function(){
$(‘.click').click(function(){
$(‘.bg').css({‘display':'block'});
$(‘.content').css({‘display':'block'});
});
$(‘.bg').click(function(){
$(‘.bg').css({‘display':'none'});
$(‘.content').css({‘display':'none'});
});
});
这里直接使用CSS方法，当点击的时候改变display属性，此外还有很多实现方法，不再赘述。完成这些，当我们点击“点击这里”之后，就可以看到效果了。
更多技巧和方法
更平缓的显示：
点击之后，突然出现并不是一个好方法。所以我又增加了一个按钮，点击之后通过fadeIn、fadeOut方法来控制渐隐。
$(‘.click1').click(function(){
$(‘.bg').fadeIn(200);
$(‘.content').fadeIn(400);
});
$(‘.bg').click(function(){
$(‘.bg').fadeOut(800);
$(‘.content').fadeOut(800);
});
这样简单的方法，就增强了用户体验。当然，还有一些更高级的效果可以实现。