css弹框

时间:2024-03-12 11:02:56

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