遮罩层 - 走看看

zoukankan html css js c++ java

遮罩层

<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}

#mask {
100%;
/*height: 500px;*/
background-color: black;
opacity: 0.5;
position: fixed;
top: 0px;
left: 0px;
z-index: 990;
}

#login {
300px;
height: 200px;
position: fixed;
/*top: 50px;
left: 200px;*/
background-color: royalblue;
z-index: 999;
}

#login-close {
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" />
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123
123

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

查看全文

相关阅读:
基于linux、c的倒排索引
 关于A类，B类，C类IP地址的网段和主机数的计算方法
 如何找出字典中的兄弟单词
 简单验证码识别程序(源码)
（一）SVM的八股简介
 验证码识别程序
 倒排索引
 验证码识别技术 Captcha Decode Technology
字符串的组合
 C# 中panel的mousewheel事件触发（转）

原文地址：https://www.cnblogs.com/niez1/p/6945765.html