很多时候，我们不能使用一些现成的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();css弹框
原文地址：https://www.cnblogs.com/chendeming/p/8403400.html