标签：jQuery 居中 color top box height login border 弹窗

需求

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

效果

先放下仿照的效果图：

代码

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'});
}

参考：
用JQuery写出登录弹出框_webnoob-CSDN博客_jquery点击弹出登录框
jquery实现弹窗功能（窗口居中显示）_jquery_脚本之家
jquery弹窗时禁止body滚动条滚动的例子_jquery_脚本之家

标签：jQuery,居中,color,top,box,height,login,border,弹窗
来源： https://blog.csdn.net/qq_34626094/article/details/121526952

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。