当前位置：首页 > news >正文

jQuery写登录弹窗并居中显示

news 来源：原创 2024/4/26 19:18:30

需求

做一个登录弹框，点击登录按钮就弹出，点击右上角×就关闭
居中显示，并且随着窗口变化而变化
让除了弹框以外区域灰色，也就是加个遮罩图层

效果

先放下仿照的效果图：
在这里插入图片描述

代码

HTML


<div class="box_lg" style="display: none">
    <div class="box_tit">
        <a class="close" href="#">×</a>
        <div class="login-title">
            登录账号
        </div>
    </div>

    <div class="box_cont">
        <form class="box_frm" action="http://www.baidu.com">
            <ol>
                <li><input type="text" name="mobile" maxlength="11" class="login-input" placeholder="请输入手机号"/></li>
                <li class="password-li">
                    <input type="text" name="smscode" class="login-input" placeholder="验证码" autocomplete="off"/>
                    <button type="button" class="msg-button">获取短信验证码</button>
                </li>


                <li><input type="submit" value="登录" class="btn btn-primary btn_frm"></li>
            </ol>
        </form>
</div>

CSS


.beianLink {
    color: #fff;
    margin-left: 10px;
}

.box_lg {
    width: 400px;
    background-color: #fff;
    padding: 20px;
    font-size: 14px;
    margin: 0 auto;

    position: fixed;
    left: 700.5px;
    top: 241px;
    height: 300px;
    z-index: 9001;
    border-radius: 4px;

}
.close {
    position: absolute;
    top: 0;
    right: -30px;
    width: 16px;
    height: 16px;
    background-image: url(https://cloudcache.tencent-cloud.cn/open_proj/proj_qcloud_v2/gateway/login-regist/login/pc/css/sprite/login-20219241033.png);
    text-indent: -10000px;
    overflow: hidden;
    outline: 0;
    background-position: -18px 0px;
}

.box_lg ol{
    padding:0;
    margin:0;
    list-style:none
}

.login-input {
    font-size: 14px;
    line-height: 28px;
    height: 45px;
    display: inline-block;
    padding: 7px 10px;
    border: 1px solid #ddd;
    color: #333;
    vertical-align: middle;
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
}

.login-input:focus, .login-input:hover {
    border-color: #00a4ff;
    outline: 0;
}

.login-title {
    font-size: 24px;
    line-height: 40px;
    margin-bottom: 15px;
    text-align: center;
    color: #000;
}

.btn_frm {
    height: 45px;
    padding: 0 20px;
    background-color: #00a4ff;
    color: #fff;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    outline: 0;
    box-sizing: border-box;
    text-decoration: none;
    width: 100%;
    border: none;
    margin-top: 40px;
}

.box_ft {
    margin-top: 20px;
    border-top: #ddd 1px dashed;
    padding-top: 20px;
    text-align: justify;
    display: flex;
}

.box_ft div{
    display: inline-block;
    width: auto;
    flex: 1;
    text-align: center;
    border-left: #e5e5e5 1px solid;
}

.box_ft div:first-child {
    border: 0;
}

.box_ft a {
    text-decoration: none;
    color: #000;
}

.box_ft a:hover {
    color: #00a4ff;
}

.password-li {
    position: relative;
}

.msg-button {
    position: absolute;
    top: 22px;
    right: 0;
    color: #175199;

    height: auto;
    line-height: inherit;
    background-color: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

JS

注意：需要引用jquery


// 登录弹框
$(document).ready(function(){
    $(".headerLoginBtn").click(function(){
        $(".login_mask").show();
        center($('.box_lg'));
        $(".box_lg").slideDown(200);

        // 浏览器窗口大小改变时
        $(window).resize(function() {
            center($('.box_lg'));
        });

        // 浏览器滚动时的操作
        $(window).scroll(function() {
            center($('.box_lg'));
        });

        // 禁止滚动
        $('body').css({
            "overflow-x":"hidden",
            "overflow-y":"hidden"
        });

    });
    $(".close").click(function(){
        $(".login_mask").hide();
        $(".box_lg").hide(100);
        // 开启滚动
        $('body').css({
            "overflow-x":"auto",
            "overflow-y":"auto"
        });
    })

});

// 居中显示弹框
function center(obj) {
    var screenWidth = $(window).width();
    screenHeight = $(window).height(); //当前浏览器窗口的 宽高
    var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
    var objLeft = (screenWidth - obj.width()) / 2;
    var objTop = (screenHeight - obj.height()) / 3 + scrolltop;
    obj.css({left: objLeft + 'px', top: objTop + 'px'});
}