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();