Jquery弹出层，背景变暗 居中

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹窗</title>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".loginCloseX").click(function(){
	$("#loginZhe").fadeOut("slow");
	$("#login").fadeOut("slow");
	});
  $("#showBox").click(function(){
	$("#loginZhe").height($(document).height()+"px");
    $("#login").css("top", (($(window).height() - $("#login").height()) / 2) + $(document).scrollTop());
    $("#login").css("left",($(window).width()-$("#login").width())/2);
	$("#loginZhe").fadeTo("slow",0.5);
	$("#login").fadeIn("slow");
	});	
  $(".loginTitle").mousedown(function(a){
	var divX = $(this).offset().left;
	var divY = $(this).offset().top;
	  var jianX = a.pageX-$(this).offset().left;
	  var jianY = a.pageY-$(this).offset().top;
    $(".loginTitle").mousemove(function(e){
      $("#login").css("left",e.pageX-jianX);
      $("#login").css("top",e.pageY-jianY);
   });
   });
  $(".winTitle").mouseup(function(){
    $(".winTitle").unbind("mousemove");
   });
   });
</script>
<style type="text/css">
body{ margin:0; padding:0; line-height:1.6; font-size:12px; font-family:Arial, Helvetica, sans-serif; height:100%;}
#login{ height:200px; width:400px; position:absolute; top:200px; left:200px; background:#FFF; z-index:2; display:none;}
#loginZhe{ background:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:none;}
.loginBoder{ position:absolute; left:-8px; top:-8px; width:416px; height:216px; background:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; z-index:-1}
.loginTitle{ padding:2px 8px; border-bottom:1px solid #CCC; background:#EBEBEB; z-index:99999;}
.loginContent{ background:#FFF; z-index:4; padding:4px; height:168px;}
.loginCloseX{ float:right; padding:2px 8px; cursor:pointer; position:absolute; top:0; right:0;font-weight:800; color:#333;}
</style>

<div id="loginZhe"></div>
<a href="#" id="showBox">显示</a>
<div id="login">
  <div class="loginTitle">这里是标题</div>
  <div class="loginContent">这里是内容</div>
  <div class="loginBoder"></div>
  <div class="loginCloseX">X</div>
</div>