利用遮罩层做登录页面
Posted 想做程序员的猪会玩丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用遮罩层做登录页面相关的知识，希望对你有一定的参考价值。
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
#mask {
width: 100%;
background-color: black;
opacity: 0.3;
position: fixed;
left: 0px;
top: 0px;
}
#pop-login {
width: 300px;
height: 100px;
position: fixed;
background-color: white;
}
#close-pop {
position: absolute;
top: 3px;
right: 3px;
}
</style>
</head>
<body>
<input type="button" value="登录" id="login-btn" /> //添加登录按钮
<body>
<script>
document.getElementById(‘login-btn‘).onclick = function() {
var b_width = document.body.clientWidth; //获取整个页面的宽度
var b_height = document.documentElement.clientHeight; //获取整个页面的高度
var left = b_width / 2 - 150 + ‘px‘;
var top = b_height / 2 - 50+ ‘px‘; //使登录框居中
var mask = document.createElement(‘div‘);
mask.style.height = b_height + ‘px‘; //使遮罩层高度能够覆盖整个页面
mask.id = ‘mask‘;
document.body.appendChild(mask);
var pop_login = document.createElement(‘div‘);
pop_login.style.left = left;
pop_login.style.top = top;
pop_login.id = ‘pop-login‘; //使登录框能够居中显示
pop_login.innerhtml =
‘<form action="#" method="post">‘ +
‘<input type="text" name="uid" placeholder="请输入用户名" />‘ +
‘<input type="password" name="pwd" />‘ +
‘<input type="submit" value="提交" />‘ +
‘</form>‘ +
‘<div id="close-pop">X</div>‘; //添加登录框
document.body.appendChild(pop_login);
document.getElementById(‘close-pop‘).onclick = function(){
document.body.removeChild(mask);
document.body.removeChild(pop_login); //给x添加点击事件，移除登录框和遮罩层
}
mask.onclick = function() {
document.body.removeChild(mask);
document.body.removeChild(pop_login); //给遮罩层添加点击事件，移除登录框和遮罩层
}
}
以上是关于利用遮罩层做登录页面的主要内容，如果未能解决你的问题，请参考以下文章