<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
width: 100%;
/* height: 800px;*/
z-index: 998;
background-color: lightslategrey;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
}
.login{
height: 300px;
width: 400px;
background-color: greenyellow;
position: fixed; /*不能设置为relative;否则登录框位置会移动 */
/*left: 100px;
top: 40px;*/
z-index: 999; /*设置显示先后顺序*/
}
.close-btn{
height: 30px;
width: 30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
position: absolute;
right: 10px;
top: 10px;
border: 1px solid black;
font-size: 25px;
}
</style>
</head>
<body>
<input type="button" value="登录" onclick="showLogin()"/>
<!-- <div class="mask"></div>-->
<!--<div class="login">
<div class="close-btn">X</div>
</div>-->
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</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";
login.innerHTML="<div class='close-btn'>X</div>"; //必须是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>
重点：
1、利用DOM创建新的DIV,获取所需要的高度和宽度；
2、有关js的高度问题看下一篇博客。
3、z-index; className; onresize会在窗口或框架被调整大小时发生