很多時候，我們不能使用一些現成的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彈框