首页 > 代码库 > 遮罩层小特效
遮罩层小特效
今天学了一个遮罩层的特效，主要用在网页里面注册页面和登陆页面的使用：
<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>
<body>
<input type="button" value="http://www.mamicode.com/登录/注册" onclick="loginShow()" />
<input type="button" value="http://www.mamicode.com/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>
</body>
<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";
}
</script>
遮罩层小特效