登录页面 （带遮罩层的） ---2017-04--5
注意事项：
1、遮罩层大小、登陆框大小都是随窗体变化而变化的。
2、onclick事件的定义。
3、js创建div,移除属性，以及将内容写入。
4、登录框中的用户名和密码均是用input写的，样式不够美观，升级版待更新。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
width: 100%;
/*height: 500px; 不能定义高,因为要跟随首页大小变化而变化*/
background-color: ghostwhite;
opacity: 0.5;
z-index: 998;
position: absolute;
top: 0px;
left: 0px;
}
.login{
width: 400px;
height: 300px;
background-color: gainsboro;
position: fixed;
/*left: 200px; 通过js读取，不需要定义
top: 300px;*/
z-index:999;
}
.close-btn{
width:30px;
height:30px;
position:absolute;
top:10px;
right:10px;
background-color: gray;
text-align: center;
line-height: 30px;
}
.close-btn:hover{
cursor: pointer;}
#a1{
width: 300px;
height: 450px;
position: absolute;
}
#inner{
width: 250px;
height: 40px;
position: relative;
left: 60px;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.yonghuming{
position: relative;
margin-top: 50px;
}
</style>
</head>
<body>
<!--<input type="button" value="登录" onclick="showLogIn()" />-->
<!--目的是换用文字，不使用input作为按钮-->
<p onclick="showLogIn()" >登录</p> <!--给文字添加onclick事件-->
<!--以下div为弹出框中的内容，要设置其display属性为none,因为只要它们在遮罩层中显示-->
<div id="a1" style="display: none;">
<div id='inner' class='yonghuming'>
用户名：<input type="text" placeholder="用户名/手机号">
</div>
<div id='inner'class='password'>
密码： <input type="password" placeholder="请输入密码">
</div>
<div id='inner'class='denglu' style="background-color:gray;margin-top: 10px;
width:220px ;margin-left: 18px;">登录</div>
<div id='inner'class='weizhuce'><br />没有账号？-点击注册</div>
</div>
</body>
</html>
<script>
function showLogIn(){
var bodyHeight=document.body.clientHeight; // 获取内容高度
var clientHeight=document.documentElement.clientHeight;
var clientWidth=document.documentElement.clientWidth;
//创建div,即最大的遮罩层
var mask=document.createElement("div");
mask.className="mask";
mask.style.height=bodyHeight+"px";
document.body.appendChild(mask);
//点击遮罩层任意一处,退出遮罩层
mask.onclick=function(){
mask.remove();
login.remove();
}
// 创建新div
var login=document.createElement("div");
login.className="login";
//使登陆框位于中间位置
login.style.left=clientWidth/2-200+"px";
login.style.top=clientHeight/2-150+"px";
//去掉display属性，使div能够显示
var d=document.getElementById("a1").removeAttribute("display");
// 将关闭按钮和id为a1的div写进classname为login的div中
login.innerHTML="<div class='close-btn'>X</div>"+ document.getElementById("a1").innerHTML;
document.body.appendChild(login);
//点击关闭按钮,退出遮罩层
document.getElementsByClassName("close-btn")[0].onclick=function(){
mask.remove();
login.remove();
}
}
//当窗体大小发生变化时,让登陆框随窗体大小而改变
document.body.onresize = function(){
var clientHeight = document.documentElement.clientHeight;
var clientWidth = document.documentElement.clientWidth;
var login = document.getElementsByClassName("login")[0];
login.style.left = clientWidth/2 - 200 + "px";
login.style.top = clientHeight/2 - 150 + "px";
}
</script>
下面代码和上面一样，方便以后copy：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
width: 100%;
/*height: 500px; 不能定义高,因为要跟随首页大小变化而变化*/
background-color: ghostwhite;
opacity: 0.5;
z-index: 998;
position: absolute;
top: 0px;
left: 0px;
}
.login{
width: 400px;
height: 300px;
background-color: gainsboro;
position: fixed;
/*left: 200px; 通过js读取，不需要定义
top: 300px;*/
z-index:999;
}
.close-btn{
width:30px;
height:30px;
position:absolute;
top:10px;
right:10px;
background-color: gray;
text-align: center;
line-height: 30px;
}
.close-btn:hover{
cursor: pointer;}
#a1{
width: 300px;
height: 450px;
position: absolute;
}
#inner{
width: 250px;
height: 40px;
position: relative;
left: 60px;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.yonghuming{
position: relative;
margin-top: 50px;
}
</style>
</head>
<body>
<!--<input type="button" value="登录" onclick="showLogIn()" />-->
<!--目的是换用文字，不使用input作为按钮-->
<p onclick="showLogIn()" >登录</p> <!--给文字添加onclick事件-->
<!--以下div为弹出框中的内容，要设置其display属性为none,因为只要它们在遮罩层中显示-->
<div id="a1" style="display: none;">
<div id='inner' class='yonghuming'>
用户名：<input type="text" placeholder="用户名/手机号">
</div>
<div id='inner'class='password'>
密码： <input type="password" placeholder="请输入密码">
</div>
<div id='inner'class='denglu' style="background-color:gray;margin-top: 10px;
width:220px ;margin-left: 18px;">登录</div>
<div id='inner'class='weizhuce'><br />没有账号？-点击注册</div>
</div>
</body>
</html>
<script>
function showLogIn(){
var bodyHeight=document.body.clientHeight; // 获取内容高度
var clientHeight=document.documentElement.clientHeight;
var clientWidth=document.documentElement.clientWidth;
//创建div,即最大的遮罩层
var mask=document.createElement("div");
mask.className="mask";
mask.style.height=bodyHeight+"px";
document.body.appendChild(mask);
//点击遮罩层任意一处,退出遮罩层
mask.onclick=function(){
mask.remove();
login.remove();
}
// 创建新div
var login=document.createElement("div");
login.className="login";
//使登陆框位于中间位置
login.style.left=clientWidth/2-200+"px";
login.style.top=clientHeight/2-150+"px";
//去掉display属性，使div能够显示
var d=document.getElementById("a1").removeAttribute("display");
// 将关闭按钮和id为a1的div写进classname为login的div中
login.innerHTML="<div class='close-btn'>X</div>"+ document.getElementById("a1").innerHTML;
document.body.appendChild(login);
//点击关闭按钮,退出遮罩层
document.getElementsByClassName("close-btn")[0].onclick=function(){
mask.remove();
login.remove();
}
}
//当窗体大小发生变化时,让登陆框随窗体大小而改变
document.body.onresize = function(){
var clientHeight = document.documentElement.clientHeight;
var clientWidth = document.documentElement.clientWidth;
var login = document.getElementsByClassName("login")[0];
login.style.left = clientWidth/2 - 200 + "px";
login.style.top = clientHeight/2 - 150 + "px";
}
</script>
