如何在浏览器窗口上添加一个遮罩层

hencehong

<div class="postcontent"><div id="cnblogs_post_body">背景

在web2.0中，页面弹窗是一个很常见的交互方式，这样既可以避免不必要的页面跳转，也可以改进界面的布局和可交互性。
但是，浏览器原生的弹窗函数（alert, confirm, prompt）有着很大的局限性，主要是它们的展现UI一来很不美观，二来也不够灵活，因此，我们经常需要自行定义弹窗函数。
当我们要实现一个模式弹窗时（模式弹窗，即是说出现弹窗时，页面其它地方不可点击），通常的做法是用一个div将整个页面窗口遮挡住。

实现

下面，我们一步步地实现一种较为简洁有效的遮罩层：

Step 1:

首先我们要考虑定义一个遮挡浏览器窗口的div，考虑下面一段html+css代码：
<div class="cnblogs_code"><div unselectable="on" style="background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;"></div>