遮罩层 | 易学教程

<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>

</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>

来源：https://www.cnblogs.com/niez1/p/6945765.html

标签

遮罩层