先放下仿照的效果图:
<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>
.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; }
注意:需要引用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_脚本之家