<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#mask {
background: #000000;
opacity: 0.75s
height: 800px;
100%;
position: absolute;
z-index: 999;
left: 0;
top: 0;
}
#login {
position: fixed;
z-index: 1000;
}
.loginCon {
570px;
height: 280px;
background-color: coral;
}
#close {
50px;
height: 50px;
background-color: #8A2BE2;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
#btn {
100px;
height: 30px;
line-height: 30px;
background-color: #00FFFF;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="btn" onclick="openNew()">登 陆</div>
</body>
</html>
<script type="text/javascript">
function openNew() {
var oBtn = document.getElementById("btnLogin");
// 获取页面高度和宽度
var sHeight = document.documentElement.scrollHeight;
var sWidth = document.documentElement.scrollWidth;
// alert(sHeight);
// alert(sWidth);
// 可视区域的高度和宽度
var wHeight = document.documentElement.clientHeight;
var wWidth = document.documentElement.clientWidth;
// alert(sHeight);
// alert(sWidth);
var oMask = document.createElement("div");
oMask.id = "mask";
oMask.style.height = sHeight + "px";
oMask.style.width = sWidth + "px";
document.body.appendChild(oMask);
var oLogin = document.createElement("div");
oLogin.id = "login";
oLogin.innerHTML = '<div class="loginCon"><div id="close"></div></div>';
document.body.appendChild(oLogin);
var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;
oLogin.style.top = (wHeight - dHeight) / 2 + "px";
oLogin.style.left = (wWidth - dWidth) / 2 + "px";
var oClose = document.getElementById("close")
oClose.onclick = function() {
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
}
oMask.onclick = function() {
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
}
}
</script>
效果图如下：
点击之后：