js实现遮罩层弹出框的方法

<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>