遮罩层
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
#mask {
width: 100%;
/*height: 500px;*/
background-color: black;
opacity: 0.5;
position: fixed;
top: 0px;
left: 0px;
z-index: 990;
}
#login {
width: 300px;
height: 200px;
position: fixed;
/*top: 50px;
left: 200px;*/
background-color: royalblue;
z-index: 999;
}
#login-close {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 10px;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css" />
<script src="js/sweetalert2.min.js"></script>
</head>
<body>
<input type="button" value="登录/注册" onclick="loginShow()" />
<input type="button" value="OOOOO" id="btn-test" />
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<!--<div id="mask"></div>
<div id="login">
<div id="login-close"></div>
</div>-->
</body>
</html>
<script>
// alert(document.documentElement.clientHeight);
function loginShow() {
var mask = document.createElement("div");
mask.id = "mask";
mask.style.height = document.body.clientHeight + "px";
mask.onclick = function() {
close(mask);
close(login);
// alert(this);
}
document.body.appendChild(mask);
// alert(this);
var login = document.createElement("div");
login.id = "login";
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
login.style.top = height / 2 - 100 + "px";
login.style.left = width / 2 - 150 + "px";
var login_close = document.createElement("div");
login_close.id = "login-close";
login_close.onclick = function() {
close(mask);
close(login);
}
login.appendChild(login_close);
document.body.appendChild(login);
}
function close(x) {
document.body.removeChild(x);
}
window.onresize = function() {
var login_re = document.getElementById("login");
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
login_re.style.top = height / 2 - 100 + "px";
login_re.style.left = width / 2 - 150 + "px";
}
document.getElementById("btn-test").onclick = function() {
swal(
'成功！',
'你成功了！',
'success'
)
}
</script>
