需求
- 做一个登录弹框,点击登录按钮就弹出,点击右上角×就关闭
- 居中显示,并且随着窗口变化而变化
- 让除了弹框以外区域灰色,也就是加个遮罩图层
效果
先放下仿照的效果图:
代码
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_脚本之家