<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #mask{ width:100%; height: 1000px; position:absolute; top:0; left:0; opacity:0.75; background: #ccc; filter: alpha(opacity=75); z-index:1000; } #login{ position:fixed; left:30%; top:30%; z-index:1001; } .loginCon{ width:670px; height:380px; background:url(img/loginbg.png) no-repeat; position:relative; } #close{ width: 30px; height: 30px; position: absolute; background: url("img/close.png") no-repeat; top:5px; right:5px;}
</style> <script> function openNew() { //获取的是窗口的宽度和高度， var sHeight = document.documentElement.scrollHeight; var sWidth = document.documentElement.scrollWidth; 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 vHeight = document.documentElement.clientHeight;//获取某个对象的宽度和高度
var dHeight = oLogin.offsetHeight; var dWidth = oLogin.offsetWidth;//为了让其居中，
oLogin.style.left = (sWidth-dWidth)/2 + "px"; oLogin.style.top = (vHeight-dHeight)/2 +"px";var oClose = document.getElementById("close");
oClose.onclick = oMask.onclick = function(){
document.body.removeChild(oMask); document.body.removeChild(oLogin); } } window.onload = function(){ var oBtn = document.getElementById("btn"); oBtn.onclick = function(){ openNew(); } }</script></head><body> <button id="btn">登陆</button></body></html>