js实现遮罩层弹出框的方法
本文实例讲述了js实现遮罩层弹出框的方法。分享给大家供大家参考。具体分析如下：
昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用
不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊：
<style>
#H-dialog{display:none;position:absolute;z-index:9999999;width:400px;height:auto;background-color:#fff;}
#H-dialog.close{float:right;font-size:30px;margin-right:10px;margin-top:5px;cursor:pointer;}
#H-dialog.title{height:40px;padding-left:10px;font-size:20px;line-height:40px;}
#H-dialog#msgCont{height:36px;margin:30px050px;padding-left:65px;font-size:25px;line-height:36px;vertical-align:middle;background:url(../Images/ui_alert.png)no-repeat20px50%;}
</style>
<divid="H-dialog">
<aclass="close"onclick="popupClose(this)">×</a>
<divclass="title">提示</div>
<divid="msgCont">内容</div>
</div>
<scripttype="text/javascript"> //锁定背景屏幕 functionlockScreen(){ varclientH=document.body.offsetHeight;//body高度 varclientW=document.body.offsetWidth;//body宽度 vardocH=document.body.scrollHeight;//浏览器高度 vardocW=document.body.scrollWidth;//浏览器宽度 varbgW=clientW>docW?clientW:docW;//取有效宽 varbgH=clientH>docH?clientH:docH;//取有效高 varblackBg=document.createElement("div"); blackBg.id="blackBg"; blackBg.style.position="absolute"; blackBg.style.zIndex="99999"; blackBg.style.top="0"; blackBg.style.left="0"; blackBg.style.width=bgW+"px"; blackBg.style.height=bgH+"px"; blackBg.style.opacity="0.4"; blackBg.style.backgroundColor="#333"; document.body.appendChild(blackBg); } //关闭按钮事件 functionpopupClose(el){ varblackBg=document.getElementById("blackBg"); blackBg&&document.body.removeChild(blackBg); el.parentNode.style.display="none"; } //自动关闭 functionautoClose(id){ id=id||"H-dialog"; varblackBg=document.getElementById("blackBg"); varobjDiv=document.getElementById(id); setTimeout(function(){ blackBg&&document.body.removeChild(blackBg); objDiv.style.display="none"; },2000); } /** *功能:弹窗信息 *参数1:提示信息内容 *参数2:提示信息状态默认0为提示信息,1为成功信息 *参数3:弹窗div的id,默认"H-dialog" *参数4:弹窗内容的id,默认"msgCont" **/ functionshowMsg(msg){ msg=msg||"请重新操作"; varstatus=arguments[1]||0, popupId=arguments[2]||"H-dialog", contentId=arguments[3]||"msgCont"; lockScreen(); //屏幕实际高宽 varpageWidth=window.innerWidth; varpageHeight=window.innerHeight; if(typeofpageWidth!="number"){ if(document.compatMode=="CSS1Compat"){ pageWidth=document.documentElement.clientWidth; pageHeight=document.documentElement.clientHeight; }else{ pageWidth=document.body.clientWidth; pageHeight=document.body.clientHeight; } } //滚动条高宽 varscrollLeft=window.document.documentElement.scrollLeft; varscrollTop=0; if(typeofwindow.pageYOffset!='undefined'){ scrollTop=window.pageYOffset; }elseif(typeofwindow.document.compatMode!='undefined'&& window.document.compatMode!='BackCompat'){ scrollTop=window.document.documentElement.scrollTop; }elseif(typeofwindow.document.body!='undefined'){ scrollTop=window.document.body.scrollTop; }
vardiv_X=(pageWidth-400)/2+scrollLeft; vardiv_Y=(pageHeight-200)/2+scrollTop; varobjDiv=document.getElementById(popupId); if(status){ document.getElementById(contentId).style.background="url($Root/Assets/Images/ui_success.png)no-repeat20px50%"; } document.getElementById(contentId).innerHTML=msg; objDiv.style.display="block"; objDiv.style.left=div_X+"px"; objDiv.style.top=div_Y+"px"; autoClose(popupId); } </script>