弹出层效果

    弹出层效果最常使用，虽有不同样式，但是大体结构式一样的，这里我写的是最简单的一种结构，以便大家理解起来容易些。

    html代码：

 1 <button class="btn btn-add">新增</button>
 2 
 3 <div class="popupBox div1">
 4     <div class="mask"></div>
 5     <div class="popup">
 6         <div class="popup-head">
 7             <div class="popup-title">新增</div>
 8             <div class="popup-close">x</div>
 9         </div>
10         <div class="popup-content"></div>
11     </div>
12 </div>

 

　　css代码：

 1 .popupBox .mask{
 2     display: none;
 3     position: absolute;
 4     top: 0px;
 5     left: 0px;
 6     width: 100%;
 7     height: 100%;
 8     background: #000;
 9     opacity: 0.5;
10     filter: alpha(opacity=50);
11     z-index: 99;
12 }
13 .popupBox .popup{
14     position: fixed;
15     width: 500px;
16     height: 300px;
17     background: #fff;
18     z-index: 100;
19     border-radius: 4px;
20     overflow: auto;
21 }
22 .popupBox .popup .popup-head{
23     height: 40px;
24     line-height: 40px;
25     border-bottom: 1px solid #eee;
26     border-radius: 4px 0px 0px 4px;
27 }
28 .popupBox .popup .popup-head .popup-title{
29     display: inline-block;
30     font-size: 22px;
31     margin-left: 15px;
32 }
33 .popupBox .popup .popup-head .popup-close{
34     display: inline-block;
35     font-size: 22px;
36     float: right;
37     margin-right: 15px;
38     cursor: pointer;
39 }

　　javascript代码：

function popupShow(_popup){  //弹出层弹出
    var mask=_popup.children(".mask");
    var popup=_popup.children(".popup");
    mask.css({"height":$(document).height()}).fadeIn();
    popup.css({
        "top":($(window).height()-popup.height())/2+"px",
        "left":($(window).width()-popup.width())/2
    }).fadeIn();
    $("body").css("overflow-y","hidden");//控制弹出层弹出后背景内容是否显示滚动条
}

function popupHide(_popup){  //弹出层关闭
    var mask=_popup.children(".mask");
    var popup=_popup.children(".popup");
    mask.css("display","none");
    popup.css("display","none");
    $("body").css("overflow-y","auto");
}

　　至此，这个效果就显示出来了，如果有什么特殊的样式效果都在这个代码结构上修改即可。

　　调用方式：

1 $(".btn-add").click(function(){
2         popupShow($(".div1"));
3 });
4 $(".div1 .popup-close").click(function(){
5     popupHide($(".div1"));
6 });

 

posted @ 2016-06-06 14:32  元仔  阅读(211)  评论(0)    收藏  举报