一个登录的弹出框

<script type="text/javascript">
function openNew(){
	//获取页面的高度和宽度
	var sWidth=document.body.scrollWidth;
	var sHeight=document.body.scrollHeight;
	//获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
	
	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;
		//设置登录框的left和top
		oLogin.style.left=sWidth/2-dWidth/2+"px";
		oLogin.style.top=wHeight/2-dHeight/2+"px";
		var oClose=document.getElementById("close");
		oClose.onclick=oMask.onclick=function(){
			document.body.removeChild(oLogin);
			document.body.removeChild(oMask);
			};
					};
		
					
	window.onload=function(){
			var oBtn=document.getElementById("btnLogin");
				//点击登录按钮
				oBtn.onclick=function(){
					openNew();
					return false;
					}
				
		}

<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:#ccc;
	opacity:0.5;
	filter: alpha(opacity=50); 
	position:absolute; 
	left:0;
	top:0;
	z-index:1000;
	width:1600px;
	height:1000px;
	}
#login{ 
	position:fixed;
	z-index:1001;
	}
.loginCon{ 
	position:relative; 
	width:670px;
	height:380px;
	background:url(img/loginBg.png) #2A2C2E center center no-repeat;
	}
</style>

<button id="btnLogin" hidefocus="true" class="login-btn">登录</button>