JS弹出窗

本文介绍了一种使用纯JavaScript和CSS实现的网页弹窗对话框方法,包括如何创建遮罩层及对话框元素,并通过计算页面尺寸来居中显示对话框。

#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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值