版权声明:版权是个什么玩意儿?看得上随便转 https://blog.csdn.net/Byte_Dance/article/details/86027477
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.mengban {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 2;
}
.login {
width: 500px;
height: 300px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
text-align: center;
padding: 5px;
font-size: 30px;
box-sizing: border-box;
color: #000;
display: none;
border-radius:5px;
z-index: 3;
}
.close {
float: right;
color: #000;
margin-right:10px;
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="btn" style="cursor: pointer;">
登录
</div>
<div class="mengban" id="MB"></div>
<div class="login" id="DL">
<div style="margin-top:30px;display: inline-block;">
欢迎登录
</div>
<div class="close" id="cls">×</div>
</div>
<script>
var denglu = document.getElementById("btn");
var cls = document.getElementById("cls");
var mb = document.getElementById("MB");
var dl = document.getElementById("DL");
denglu.onclick = function () {
mb.style.display = "block";
dl.style.display = "block";
}
cls.onclick = function () {
mb.style.display = "none";
dl.style.display = "none";
}
</script>
</body>
</html>