很多时候，我们不能使用一些现成的js插件实现弹框效果。于是乎，总是不得不使用最原始的方式来实现类似弹框的效果。
不巧，最近在项目中遇上了一次，在此将使用过的代码进行一波整理。
要实现css蒙板思路如下：
用一个div弹出框下面的东西，做一个覆盖层；用一个div做为弹出框内容，将之覆盖于所有div之上。即：
（1）一个能够完整覆盖背景的灰色div；
（2）一个有弹出框弹出效果（浮于页面之上，可以是类似突出效果）的div，div之中可以放置自己想要的内容；
二话不说来一段代码，这段代码是实现一个读进度条弹出框的：
代码如下：
http://blog.csdn.net/u014665035/article/details/53079684
<!-- 弹出层start --> <style> .background { display: block; width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); background:while; position: fixed; top: 0; left: 0; z-index: 2000; background-color:#666666; } /* 弹出框那个框框的样式 */ .progressBar { border: solid 2px #86A5AD; background: white no-repeat 18px 35px; } /* 弹出框内的样式 */ .progressBar { display: block; width: 500px; height: 200px; top: 50%; left: 50%; margin-left: -74px; margin-top: -14px; padding: 10px 10px 10px 30px; text-align: left; line-height: 27px; font-weight: bold; position: fixed; z-index: 2001; } </style> <!-- 弹出框dom --> <div id="loading" style="display: none; "> <div class="background" ></div> <div class="progressBar""><img src="../img/loading.gif">正在绘图中，请稍等...</div> </div> <!-- 弹出层end --> //触发关闭 $("#loading").hide(); //触发弹出 $("#loading").show();
