css弹框
很多时候,我们不能使用一些现成的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();