jQuery弹出层通用函数封装

弹出层是很多网站都会用到的效果，接下来用实现弹出层函数封装：

（一）先看页面效果：

1. header 顶部导航条最右侧放登陆、注册两个链接

2.点击登陆链接时，弹出登陆窗体

3.点击右侧关闭按钮，登陆窗体关闭

4.点击注册链接时，弹出注册窗体

5.点击右侧关闭按钮，注册窗体关闭

（二）html结构（为简略，结构已省略logo、nav、登录注册等具体内容）：

    
    
    
    
    


    
    
 
        登录
        注册
    

    
    

    
    

        
        
×
        
        

    

        
        

            
这是登陆窗体内容
        
        
        

            
这是注册窗体内容
        

（三）简单CSS样式

/*头部样式*/
header{
    width: 1200px;
    height: 80px;
    line-height: 80px;
    text-align: right;
    margin: 0 20px 0 25px;
    overflow: hidden;
    border: 1px #333 solid;
}
header a{
    margin-left: 20px;
    margin-right: 20px;
}

/*弹出层遮罩*/
.layer-mask {
    display: none;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
}
/*弹出层窗体*/
.layer-pop {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 300px;
    background: #fff;
}
/*关闭按钮*/
.layer-close {
    float: right;
    width: 24px;
    height: 24px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #eee;
    border: 3px solid #fff;
    margin-right: -12px;
    margin-top: -12px;
}
.layer-close:hover {
    cursor: pointer;
    background: #ccc;
    color: #fff;
}

（四）jQuery脚本

$(document).ready(function($){
    
    // 登陆链接事件
    $("#loginLink").click(function(){
        //获取登陆窗体代码
        var loginHtml = $("#loginHtml").html();
        showLayer(loginHtml,500,300);
    });

     // 注册链接事件
    $("#regeLink").click(function(){
        //获取注册窗体代码
        var regeHtml = $("#regeHtml").html();
        showLayer(regeHtml,500,300);
    });

    // 封装显示弹出层函数
    function showLayer(html,width,height,closeCallback){
        $("#layer-mask").show();
        $("#layer-pop").show();
        //动态设置弹出层宽度高度
        $("#layer-pop").css({
            width: width,
            height: height
        });
        //填充弹出层窗体内容
        $("#layer-content").html(html);
        //绑定事件，调用hideLayer
        $("#layer-close").click(function(){
            hideLayer();
        });
    };

    // 封装隐藏弹出层函数
    function hideLayer(){
        $("#layer-mask").hide();
        $("#layer-pop").hide();
    };
});