javascript-弹出层练习
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<link type="text/css" rel="stylesheet" href="style/main.css" />
<style type="text/css">
#close{
background:url(img/close.png) no-repeat;
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
text-indent:-999em;
}
#mask{
background-color:#000;
opacity:0.5;
filter: alpha(opacity=50);
position:absolute;
left:0;
top:0;
z-index:1000;
}
#login{
position:fixed;
z-index:1001;
}
.loginCon{
position:relative;
width:670px;
height:380px;
background:url(img/loginBg.png) #2A2C2E center center no-repeat;
}
.main{margin:0 auto;width:1349px;height:1694px;overflow: hidden;background:url(img/body.png) no-repeat -100px 0px;}
</style>
</head>
<body>
<div id="header">
<div class="container" id="nav">
<div id="login-area">
<button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
</div>
</div>
</div>
<div class="main"></div>
</body>
<script type="text/javascript">
var showTip = function(){
//页面的和高度和宽度、可见高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var mask = document.createElement('div');
mask.id = 'mask';
mask.style.height = scrollHeight + 'px';
mask.style.width = scrollWidth + 'px';
document.body.appendChild(mask);
var login = document.createElement('div');
login.id = 'login';
login.innerHTML = '<div class="loginCon"><div id="close">点击关闭</div></div>';
document.body.appendChild(login);
var loginW = login.offsetWidth;
var loginH = login.offsetHeight;
login.style.top = Math.floor((clientHeight - loginH) / 2) + 'px';
login.style.left = Math.floor((scrollWidth- loginW) / 2) + 'px';
var colseBtn = document.getElementById('close');
colseBtn.onclick = function(){
document.body.removeChild(mask);
document.body.removeChild(login);
};
window.onload = function(){
var loginBtn = document.getElementById('btnLogin');
loginBtn.onclick = showTip;
}
</script>
</html>
