现在的情况是点点击遮罩也会关闭登录窗口
登录窗口上有个X了，只想实现点X关闭登录窗口，点遮罩不关闭
<!DOCTYPE html>
<!-- saved from url=(0069)https://www.17sucai.com/preview/2091323/2020-12-09/register/demo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<style>
@charset "utf-8";
* {padding: 0; margin: 0; color: #c4c3ca; font-size: 14px;}
body {
background-image: url("");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.45);
/* display:none对动画transitoin 不支持 opacity支持 */
display: none;
}
.bg .login-card {
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -150px;
border-radius: 5px;
}
.card-active{
animation: a .6s;
}
.card-active2 {
animation: b .3s;
}
.active {
display: block;
}
/* @keyframes 规则，您能够创建动画。 */
/* 通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。 */
@keyframes a {
from {opacity: 0; top: 40%}
to {opacity: 1; top: 50%}
}
@keyframes b {
from {opacity: 1;}
to {opacity: 0; margin-left: -250px;}
}
.rotate {
width: 300px;
height: 350px;
background-color: #2a2b38;
border-radius: 15px;
/* preserve-3d表示所有子元素在3D空间中呈现 */
transform-style: preserve-3d;
/* perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。 */
transform: perspective(700px);
transition: all .6s ease;
}
.rotate .form-group {
position: relative;
margin: 20px;
}
.rotate .form-style {
background-color: #1f2029;
padding: 13px 40px;
outline: none;
border: none;
border-radius: 4px;
font-size: 14px;
color: #c4c3ca;
}
.rotate .form-group input::-webkit-input-placeholder {
opacity: 0.7;
transition: all 0.1s linear;
}
.rotate .form-group input:focus::-webkit-input-placeholder {
opacity: 0;
}
.rotate .form-group .input-icon {
position: absolute;
top:10px;
left:20px;
}
.rotate .input-btn {
border-radius: 4px;
height: 44px;
padding: 0 30px;
font-size: 12px;
font-weight: 600;
text-align: center;
border: none;
background-color: #ffeba7;
color: #102770;
box-shadow: 0 8px 24px 0 rgba(255, 235, 167, 0.2);
outline: none;
cursor: pointer;
}
.rotate .card-back,.rotate .card-front {
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.rotate .card-back {
transform: translateZ(1px);
}
.rotate .card-front {
transform: rotateY(180deg) translateZ(25px);
}
.change {
transform: rotateY(-180deg);
}
.rotate h4 {
padding-top: 20px;
font-weight: 600;
font-size: 1.5rem;
color: #c4c3ca;
}
.rotate .btn {
text-decoration: underline;
cursor: pointer;
transition: all linear .1s;
}
.rotate .btn:hover {
color: #ffeba7;
}
.rotate .form-left {
text-align: left;
}
.rotate .form-font1 {
margin-left: 50px;
cursor: pointer;
}
.rotate .top_nav {
position: absolute;
top: 10px;
right: 10px;
display: block;
width: 35px;
height: 35px;
background: url("//www.17sucai.com/preview/2091323/2020-12-09/register/images/close_button.png") no-repeat 0px 0px;
transition: 0.2s;
cursor: pointer;
}
.rotate .top_nav:hover {
background: url("https://www.17sucai.com/preview/2091323/2020-12-09/register/close_button.png") no-repeat 0px -35px;
}
</style>
</head>
<body >
<div style="position: relative; height: 10px;"><button class="login-btn" style="position: absolute; right: 20px; color: black;">登录/注册</button></div>
<div class="bg">
<div class="login-card card-active2">
<div class="rotate change">
<div class="card-front">
<h4>登录</h4>
<div class="img_nav"><i class="top_nav"></i></div>
<form action="">
<div class="form-group"><img class="input-icon" src="https://www.17sucai.com/preview/2091323/2020-12-09/register/images/login.png"><input type="text" class="form-style" placeholder="请输入用户名"></div>
<div class="form-group"><img class="input-icon" src="https://www.17sucai.com/preview/2091323/2020-12-09/register/images/pass.png"><input class="form-style" type="password" placeholder="请输入密码"></div>
<div class="form-group"><input type="submit" class="input-btn" value="登录"></div>
<div class="form-group form-left">
<span>没有账号?</span>
<span class="btn" id="btn2">立即注册</span>
<span class="form-font1">忘记密码?</span>
</div>
</form>
</div>
<div class="card-back">
<form action="">
<h4>注册</h4>
<div class="img_nav"><i class="top_nav"></i></div>
<div class="form-group"><img class="input-icon" src="https://www.17sucai.com/preview/2091323/2020-12-09/register/images/login.png"><input type="text" class="form-style" placeholder="请输入用户名"></div>
<div class="form-group"><img class="input-icon" src="https://www.17sucai.com/preview/2091323/2020-12-09/register/images/pass.png"><input type="password" class="form-style" placeholder="请输入密码"></div>
<div class="form-group"><input type="submit" class="input-btn" value="注册"></div>
<div class="form-group">
<span>已有账号?</span>
<span class="btn" id="btn">立即登录</span>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function login() {
var rotate=document.querySelector(".rotate");
var btn=document.getElementById("btn");
var btn2=document.getElementById("btn2");
btn.onclick=function() {
rotate.classList.add("change");
}
btn2.onclick=function() {
rotate.classList.remove("change");
}
}
login();
function pop() {
var bg=document.querySelector(".bg");
var loginCard=document.querySelector(".login-card");
var close=document.querySelector(".card-front .top_nav")
var close2=document.querySelector(".card-back .top_nav")
bg.onclick=function() {
setTimeout(function() {
bg.classList.remove("active")
}, 200)
}
loginCard.onclick=function(e) {
if (e.target==close||e.target==close2) return;
e.stopPropagation();
}
var loginBtn=document.querySelector(".login-btn");
loginBtn.onclick=function() {
loginCard.classList.remove("card-active2");
loginCard.classList.add("card-active");
bg.classList.add("active");
}
}
pop();
</script>
</body></html>
