前端系列之jQuery(jQuery弹出层)

弹出层与使用场景介绍

弹出层代码编写

html整体结构

 <!--弹出层遮罩-->
    <div id="layer-mask" class="layer-mask"></div>

    <!--弹出层窗体-->
    <div id="layer-pop" class="layer-pop">
        <!--弹出层关闭按钮-->
        <div id="layer-close" class="layer-close">×</div>
        <!--弹出层内容区域-->
        <div id="layer-content" class="layer-content"></div>
    </div>

css样式编写

/*弹出层遮罩*/
.layer-mask{
    display: none;
    z-index: 99999;
    position: fixed;/*固定定位*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.5;/*不透明度*/
}
/*弹出层窗体*/
.layer-pop{
    display: none;
    z-index: 100000;
    position: fixed;
    top: 0;/*居中显示*/
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    width: 400px;
    height: 300px;
    background: #FFFFFF;
}
/*弹出层关闭按钮*/
.layer-close{
    float: right;
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
    background: #EEEEEE;
    margin-right: -12px;
    margin-top: -12px;
}
/*鼠标移动到按钮位置*/
.layer-close:hover{
    cursor: pointer; /*鼠标小手*/
    background: #CCCCCC;
    color: #FFFFFF;
}

index.js

$(document).ready(function($) {
    //登录链接事件
    //  $('#loginLink').click(function() {
    //
    //      //显示弹出层遮罩
    //      $('#layer-mask').show(); //使用jQuery的show()方法让其显示
    //      //显示弹出层窗体
    //      $('#layer-pop').show();
    //      //弹出层关闭按钮绑定事件
    //      $('#layer-close').click(function() {
    //          //弹出层关闭
    //          $('#layer-mask').hide(); //使用jQuery的hide()方法让其隐藏
    //          $('#layer-pop').hide();
    //      })
    //  })

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

        // 登录表单校验
        $("#loginSubmitBtn").click(function() {
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            if(username === 'imooc' && password === 'imooc') {
                alert("登录成功");
            } else {
                $(".error-msg").html("账号或密码输入错误");
            }
        });
    });

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

        // 注册表单校验
        $("#regeSubmitBtn").click(function(){
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            var repassword = $("input[name='repassword']").val();
            if(username === 'imooc' && password === 'imooc' && repassword === password){
                alert("注册成功");
            }else{
                $(".error-msg").html("账号或密码输入错误");
            }
        });
    });

    // 弹出层关闭回调函数
    function closeCallback(){
        $(".error-msg").html("");
    }

    // 显示弹出层
    function showLayer(html,width,height,closeCallback){
        // 显示弹出层遮罩
        $("#layer-mask").show();
        // 显示弹出层窗体
        $("#layer-pop").show();
        // 设置弹出层窗体样式
        $("#layer-pop").css({
            width : width,
            height : height
        });
        // 填充弹出层窗体内容
        $("#layer-content").html(html);
        // 弹出层关闭按钮绑定事件
        $("#layer-close").click(function(){
            // 弹出层关闭
            hideLayer();
            // 关闭的回调函数
            closeCallback();
        });
    }

    // 隐藏弹出层
    function hideLayer(){
        // 弹出层关闭
        $("#layer-mask").hide();
        $("#layer-pop").hide();
    }
});

完整Demo示例：

链接: https://pan.baidu.com/s/1pMpq9Ij 密码: tah2