                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /弹出层效果

弹窗没有居中，页面运行的时候代码有显示距离，但是没有执行，是没有调用到吗？麻烦大神看下

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<title>王者</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
#mask{ background:#000; opacity:0.6; filter:alpha(opacity=6); height:1000px; width:100%; position:absolute; top:0; left:0; z-index:1000;}
#login{ position:fixed; left:30%; top:30%; z-index:1001;}
.loginCon{
width:400px; height:380px; background:#f0f; position:relative;
}
#close{ width:30px; height:30px; background:#fff; cursor:pointer; position:absolute; right:5px;top:5px;}
 </style>
<script type="text/javascript">
 window.onload=function(){
	  var oBtn=document.getElementById("btnLogin"); 
	  //获取浏览器的高度和宽度
	   var sHeight=document.documentElement.scrollHeight;
	   var sWidth=document.documentElement.scrollWidth;
	    
	   //可视区域的高度和宽度
	   var wHeight=document.documentElement.clientHeight;
	  
	 
	  var oMask=document.createElement("div");//创建节点DIV，给div一个ID，mask
	      oMask.id="mask";
		  oMask.style.height=sHeight+"px";
		  oMask.stylewidth=sWidth+"px";
		  document.body.appendChild(oMask);//在页面尾部追加节点
		  
	  var oLogin=document.createElement("div");
	      oLogin.id="Login";
		  oLogin.innerHTML="<div class='loginCon'><div id='close' style='text-align:center;'>x</div></div>";//把传入的DIV插入到节点中
		  document.body.appendChild(oLogin); 
      //获取Login的宽度和高度
	  var dHeight=oLogin.offsetHeight;
	  var dWidth=oLogin.offsetHeight;
	  
	  oLogin.style.left=(sWidth-dWidth)/2+"px";
	  oLogin.style.top=(wHeight-dHeight)/2+"px";
	 }

</script> 
</head>
<body>
   <!--<div id="mask"></div>
   <div id="login">
     <div class="loginCon">
       <div id="close" style="text-align:center;">x</div>
     </div>
   </div>-->
</body>
</html>