弹出层/登录界面
弹出层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0px;
padding:0px;}
.mask{ width:100%;
/*height:500px;*/
background-color:gray;
opacity:0.5;
z-index:998;
position:absolute;
top:0px;
left:0px;}
.login{ width:400px;
height:300px;
background-color:royalblue;
position:fixed;
/* left:200px;
top:300px;*/
z-index:999;
}
.close-btn{ width:30px;
height:30px;
position:absolute;
right:10px;
top:10px;
background-color:#9CC;
text-align:center;
line-height:30px;
font-size:30px;
}
.close-btn:hover{ cursor:pointer;}
</style>
</head>
<body>
<input type="button" value="登录" id="login" />
<script>
document.getElementById("login").onclick = function(){
var x = "<div class='close-btn'>X</div>";
showLogin(x);
}
</script>
<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>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<!--<div class="mask"></div>
<div class="login">
<div class="close-btn">X</div>
</div>-->
</body>
</html>
<script>
function showLogin(x){
var bodyHeight=document.body.clientHeight;
var clientHeight=document.documentElement.clientHeight;
var clientWidth=document.documentElement.clientWidth;
var mask=document.createElement("div");
mask.className="mask";
mask.style.height=bodyHeight+"px";
mask.onclick=function(){
mask.remove();
login.remove();};
document.body.appendChild(mask);
var login=document.createElement("div");
login.className="login";
login.style.left=clientWidth/2-200+"px";
login.style.top=clientHeight/2-150+"px";
login.innerHTML=x;
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>
比较完整的登录界面（有遮罩层）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
width: 100%;
/*height: 500px;*/ //不能定义高,因为要跟随首页大小变化而变化
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="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>
