1、无遮罩层，单独一个登录页面 （背景色只是区分作用，可自己根据页面调）
代码如下：
<style>
.box{
height: 250px;
300px;
position: absolute;
background-color: bisque;
}
.top{
height: 50px;
300px;
position: relative;
text-align: center;
vertical-align: middle;
line-height: 50px;
font-size: 25px;
color: white;
font-weight: bold;
}
.middle-1{
height: 100px;
300px;
position: relative;
}
.middle-2{
height: 50px;
300px;
position: relative;
}
.bottom {
height: 20px;
300px;
position: relative;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="top">Login</div>
<div class="middle-1">
<form method="get" action="data.html">
<input type="text" name="" placeholder="Username"
style=" 250px;height: 35px;background-color: transparent;margin-left: 25px;font-size: 15px;margin-bottom: 10px;border-radius: 5px;"/>
<input type="password" name="" placeholder="password"
style=" 250px;height: 35px;background-color: transparent;margin-left: 25px;font-size: 15px;margin-top: 5px;border-radius: 5px;" />
</form>
</div>
<div class="middle-2">
<form method="get" action="data.html">
<input type="button" value="Sign me in"
style=" 250px;height: 40px;
background-color: orangered;margin: 5px 25px;font-size: 18px;border-radius: 5px; color: white;"/>
</form>
</div>
<div class="bottom">
密码找回
没有账号？- 点击注册
</div>
</div>
</body>
2、 带遮罩层 ，灰色为遮罩层（前天的稍微完善版本，还有待继续完善，诸如判断用户名与密码是够匹配？忘记密码？等。。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
100%;
/* height: 800px;*/
z-index: 111;
background-color: gray;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
}
.login{
height: 250px;
330px;
background-color: bisque;
position: fixed; /*不能设置为relative;否则登录框位置会移动 */
/*left: 100px;
top: 40px;*/
z-index: 222; /*设置显示先后顺序*/
}
.close-btn{
height: 30px;
30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
}
#a1{
height: 250px;
300px;
/*position: relative;
margin-top: 10px;
left: 10px;*/
z-index: 999;
}
.top{
height: 50px;
300px;
position: relative;
text-align: center;
vertical-align: middle;
line-height: 50px;
font-size: 25px;
color: white;
font-weight: bold;
}
.middle-1{
height: 100px;
300px;
position: relative;
}
.middle-2{
height: 50px;
300px;
position: relative;
}
.bottom {
height: 20px;
300px;
position: relative;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<input type="button" value="登录" onclick="showLogin()"/>
<!--目的使窗体出现滚动条-->
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<div class="box" id="a1" style="display: none; position: absolute;">
<div class="top">Login</div>
<div class="middle-1">
<form method="get" action="data.html">
<input type="text" name="" placeholder="Username"
style=" 250px;height: 35px;background-color: transparent;border-radius: 5px;margin-left: 25px;font-size: 15px;margin-bottom:10px;"/>
<input type="password" name="" placeholder="password"
style=" 250px;height: 35px;background-color: transparent;border-radius: 5px;margin-left: 25px;font-size: 15px;" />
</form>
</div>
<div class="middle-2">
<form method="get" action="data.html">
<input type="button" value="Sign me in"
style=" 250px;height: 40px;
background-color: darkred;margin: 5px 25px;font-size: 18px;border-radius: 5px; color: white;"/>
</form>
</div>
<div class="bottom">
密码找回
没有账号？- 点击注册
</div>
</div>
</body>
</html>
<script>
function showLogin(){
var bodyheight=document.body.clientHeight; //获取body高度
var mask=document.createElement("div"); //创建一个div
mask.className="mask";
mask.style.height=bodyheight+"px"; //获取mask的高度，必须从style中获取
document.body.appendChild(mask); //显示遮罩层
mask.onclick = function(){ //点击遮罩层关闭
mask.remove();
login.remove();
}
var lwidth=document.documentElement.clientWidth;
var lheight=document.documentElement.clientHeight;
var login=document.createElement("div");
login.className="login";
login.style.left=lwidth/2 - 200+"px";
login.style.top=lheight/2 - 150+"px";
var d=document.getElementById("a1").removeAttribute("display");
login.innerHTML="<div class='close-btn'>X</div>"+document.getElementById("a1").innerHTML; //必须是html,text读不出样式
document.body.appendChild(login);
document.getElementsByClassName("close-btn")[0].onclick = function(){
mask.remove();
login.remove(); //点击X关闭
}
}
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>