<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹框</title>
<link rel="stylesheet" href="style.css">
<style>
html{font-size:100px;}
/*弹窗登陆页start*/
.login_zhezhao{position:fixed;z-index:3;100vw;height:100vh;top:0;}
.login_alert{position:absolute;z-index:3;top:0;left:0;background:#000;opacity:0.8;100vw;height:100vh;}
.login{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;6.24rem;height:6.58rem;z-index:4;background:#fff;border-radius:0.1rem;text-align:center;}
.login .userphonewrap,.login .passwordwrap{5.18rem;height:1.17rem;border:0;border-bottom:0.01rem solid #bababa;position:relative;left:50%;margin-left:-2.59rem;}
.login .userphone,.login .password{
height: 0.6rem;
line-height: 0.6rem;
display: block;
position: absolute;
top: 0.38rem;
font-size:0.26rem;
}
.login input{font-size:0.3rem;padding-left:0.22rem}
.login input::-webkit-input-placeholder { /* WebKit browsers */
color: #999;font-size:0.3rem;padding-left:0.22rem;
}
.login input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;font-size:0.3rem;padding-left:0.22rem;
}
.login input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;font-size:0.3rem;padding-left:0.22rem;
}
.login input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;font-size:0.3rem;padding-left:0.22rem;
}
.login .getpassword{font-size:0.3rem;padding-left:0.22rem;color: #ff6633;}
.login .loginbtn{color:#fff;font-size:0.32rem;5.26rem;height:0.96rem;line-height:0.96rem;border-radius:0.1rem;background:#ff6633;position:relative;left:50%;margin:0.86rem 0 0 -2.63rem;}
.login #close_login{1rem;height:1rem;line-height:1rem;font-size:0.5rem;opacity:0.6;color:#fff;border-radius:50%;border:0.02rem solid #fff;position:absolute;bottom:-1.3rem;left:50%;margin-left:-0.47rem;z-index:33;}
</style>
</head>
<body>
<p class="pbtn">点击显示弹框</p>
<!-- 弹窗登录页start -->
<div class="login_zhezhao" id="login_already" style="display:none;">
<div class="login_alert"></div>
<div class="login">
<p style="color:#333;font-size:0.4rem;margin:0.76rem 0 0.52rem 0">手机号登录</p>
<div class="userphonewrap"><input id="uPhone" class="userphone" type="text" placeholder="请输入手机号"></div>
<div class="passwordwrap">
<input id="inPassword" class="password fl" style="2.59rem;" type="text" placeholder="请输入验证码">
<input id="getPassword" class="getpassword fr" style="2rem;height:1.17rem;line-height:1.17rem;" type="button" value="获取验证码">
</div>
<div id="outPage" class="loginbtn">确认登录</div>
<p id="close_login">X</p>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$('.pbtn').click(function(){
$('.login_zhezhao').show();
})
$('#close_login').click(function(){
$('.login_zhezhao').hide();
})
</script>
</body>
</html>