#mask{ background:#000; opacity: 0.75; filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75; height:1000px; width:100%; position:absolute; left:0; top:0;z-index:20;}
#HR_mail{ position:fixed; z-index:21; }
.HR_mail_box{ position:relative; width:800px; height:600px; background:#fff; z-index:22;}
#close{ width:18px; height:18px; background:url(../images/msg_close.png) 0px -30px no-repeat; position:absolute; right:6px; top:6px; z-index:23; cursor:pointer;}
<script type="text/javascript">
function openNew(){//获取页面的高度和宽度
var sHeight=document.documentElement.scrollHeight;
var sWidth=document.documentElement.scrollWidth;
//可视区域的高度和宽度
//如果说页面是一个竖向的页面,那么可视区域的宽度和页面的宽度是一样的
var wHeight=document.documentElement.clientHeight;
var wWidth=document.documentElement.clientWidth;
var oMask=document.createElement("div");
oMask.id="mask";
oMask.style.height=sHeight+"px"
oMask.style.width=sWidth+"px"
document.body.appendChild(oMask);
var oHR_Mail=document.createElement("div");
oHR_Mail.id="HR_mail";
oHR_Mail.innerHTML="<div class='HR_mail_box'><div id='close'></div></div>";
document.body.appendChild(oHR_Mail);
//获取HR_mail的宽度和高度
var dHeight=oHR_Mail.offsetHeight;
var dWidth=oHR_Mail.offsetWidth;
//给HR_mail的left和top赋值
oHR_Mail.style.left=(wWidth-dWidth)/2+"px";
oHR_Mail.style.top=(wHeight-dHeight)/2+"px";
var oClose=document.getElementById("close");
oMask.onclick=oClose.onclick=function(){
document.body.removeChild(oMask);
document.body.removeChild(oHR_Mail);
}
}
window.onload=function(){
var oBtn=document.getElementById("btnHR_Mail");
oBtn.onclick=function(){
openNew()
}
}
</script>