目前，因为可以带来很好用户体验，这种半透明的遮罩层越来越流行了。之前有写过这样的一个模型，现在发上来和大家共享一下。
想做这样的东西出来，要先要知道实现的基本原理。一般的效果应该是这样的，点击页面上的一个按钮，弹出用div模拟的小窗口，在原页面和弹出层之前还有个半透明遮罩层，把原页面挡住，以防止在原页面的任何操作。
我们先把半透明遮罩层和上面的内容曾隐藏，在点击按钮<input type="button" value="点击测试" />时再让他们显示出来，其实这样就是我们做的这个遮罩层效果的基本原理了，只不过我在这个过程中加了一些其他的特效，让遮罩层有一个透明度的变化。重点在于，设置遮罩层的高度，我们知道，绝对定位的层设计height:100%,不能实现和body的高度自适应，那么就只能用js方法来实现对其高度的定义了，从而实现全屏覆盖内容层的目的。
这里会有两种情况：
第一，当页面的实际高度（body的高度）小于浏览器工作区的高度时，设置overLay的高度为：document.documentElement.clientHeight + 'px',（浏览器的工作区的高度，也就是html的可视高度），至于为什么在这里加上'px',那是因为document.documentElement.clientHeight 本身为数值型数据，而并非字符串。
第二，当页面的实际高度（body的高度）大于浏览器工作区的高度时，设置overLay的高度为：document.body.offsetHeight（页面的实际高度）。
因为我们不知道页面的实际高度是否超过了一屏，所以为了避免未知的错误，当然就要交给if...else...了，呵呵。在对弹出层的操作完成后，点击其上的“关闭”按钮，那么让遮罩层和遮罩层之上的内容层隐藏，这样，就简单实现了这个所谓的半透明遮罩层的效果，- -！
具体效果请参考：查看效果
