弹出一个层来让用户确认操作

无意间对163邮箱的层确认对话框产生了兴趣，弹出一个层来询问用户的操作，其它部分用阴影覆盖，看上去比较爽，于是决定做一个这样的样式用于公司的OA系统中。以下是JS实现代码： 

  1//eTarget:   按钮ID
  2//eArgument: 按钮事件参数,一般为''.
  3//msgtitle:  提示信息的标题.
  4//msgcontent:提示信息的内容.
  5//selecttype:弹出的对话框类型.
  6//cancelfun: 当用户点击取消按钮时要执行的客户端Javascript函数.无则传入null.
  7function ShowMsg(eTarget,eArgument,msgtitle,msgcontent,selecttype,cancelfun){ 
  8   //有沒有__EVENTTARGET和eTarget按钮
  9   if(selecttype>=1 &&(!document.getElementById("__EVENTTARGET")||!document.getElementById(eTarget)))
 10   {
 11        return window.confirm(msgcontent);
 12   }
 13   var msgw,msgh,bordercolor; 
 14   msgw=400;//确认层的宽度
 15   msgh=150;//确认层的高宽度
 16   titleheight=25 //瓢虫的高度
 17   bordercolor="#ff6600";//边框颜色
 18   titlecolor="#ff6600";//标题颜色
 19   btnborderstyle="1px solid #ff6600";//按钮边框风格
 20   btnbgcolor="#FE8433";//按钮背景色
 21  
 22   var sWidth,sHeight; 
 23   sWidth=document.body.offsetWidth; 
 24   sHeight=screen.height; 
 25   sWidth = document.body.clientWidth;
 26   if(document.body.scrollWidth>sWidth){
 27        sWidth =  document.body.scrollWidth; 
 28   }
 29   sHeight = document.body.clientHeight;
 30   if(document.body.scrollHeight>sHeight){
 31        sHeight =  document.body.scrollHeight; 
 32   }
 33   var bgObj=document.createElement("div"); 
 34   bgObj.setAttribute('id','bgDiv'); 
 35   bgObj.style.position="absolute"; 
 36   bgObj.style.top="0"; 
 37   bgObj.style.background="#777"; 
 38   bgObj.style.filter="alpha(opacity=30)";
 39   bgObj.style.MozOpacity = 30/100;
 40   bgObj.style.left="0"; 
 41   bgObj.style.width=sWidth + "px"; 
 42   bgObj.style.height=sHeight + "px";   
 43   bgObj.style.zIndex = "10000"; 
 44   document.body.appendChild(bgObj); 
 45    
 46   var msgObj=document.createElement("div") 
 47   msgObj.setAttribute("id","msgDiv"); 
 48   msgObj.setAttribute("align","center"); 
 49   msgObj.style.background="white"; 
 50   msgObj.style.border="1px solid " + bordercolor; 
 51   msgObj.style.position = "absolute"; 
 52   msgObj.style.left = "50%"; 
 53   msgObj.style.top = "50%"; 
 54   msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
 55   msgObj.style.marginLeft = "-225px" ; 
 56   msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 
 57   msgObj.style.width = msgw + "px"; 
 58   msgObj.style.height =msgh + "px"; 
 59   if(selecttype==-1||selecttype==0){
 60        msgObj.style.height=msgh-50+"px";
 61   } 
 62   msgObj.style.textAlign = "center"; 
 63   msgObj.style.lineHeight ="25px"; 
 64   msgObj.style.zIndex = "10001"; 
 65    
 66   var title=document.createElement("h4"); 
 67   title.setAttribute("id","msgTitle");    
 68   title.style.margin="0"; 
 69   title.style.padding="3px"; 
 70   title.style.background=bordercolor; 
 71   title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
 72   title.style.opacity="0.75"; 
 73   title.style.border="1px solid " + bordercolor; 
 74   title.style.height=titleheight+"px"; 
 75   title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
 76   title.style.color="white";
 77      
 78   if(selecttype==-1)
 79   {
 80       title.setAttribute("align","left"); 
 81       title.innerHTML=msgtitle;
 82   }
 83   else if(selecttype==0)//add close
 84   {
 85       title.style.cursor="pointer"; 
 86       title.setAttribute("align","right"); 
 87       title.innerHTML="Close"; 
 88       title.onclick=function(){ 
 89              document.body.removeChild(bgObj); 
 90              document.getElementById("msgDiv").removeChild(title); 
 91              document.body.removeChild(msgObj); 
 92              //取消后执行
 93              if(cancelfun!=null&&cancelfun!='')
 94              {
 95                  cancelfun();
 96              }
 97            } 
 98   }
 99   else
   {
       title.setAttribute("align","left"); 
       title.innerHTML=msgtitle;         
   }
   
   document.body.appendChild(msgObj); 
   document.getElementById("msgDiv").appendChild(title); 
   var txt=document.createElement("p"); 
   txt.style.margin="1em 0";
   txt.setAttribute("id","msgTxt"); 
   txt.innerHTML=msgcontent; 
   document.getElementById("msgDiv").appendChild(txt);  
   
   //add buttom
   if(selecttype==1)//确定
   {
       //buttom
       var btnok=document.createElement("a"); 
       btnok.innerHTML="OK";
       btnok.style.marginTop="10px";
       btnok.style.marginBottom="5px";      
       btnok.style.width = "40px"; 
       btnok.style.height ="20px"; 
       btnok.style.border= btnborderstyle; 
       btnok.style.background=btnbgcolor;
       btnok.style.cursor="pointer"; 
       
       //确定事件
       btnok.onclick=function(){ 
              document.getElementById("msgDiv").removeChild(btnok);
              //提交
                var theForm = document.forms['form1'];
              if (!theForm) {
                  theForm = document.form1;
              }
              if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                if(document.getElementById("__EVENTTARGET"))
                {
                    theForm.__EVENTTARGET.value = eTarget;
                    theForm.__EVENTARGUMENT.value = '';                
                    theForm.submit();
                    //服务器返回之前
                    title.innerHTML="系统提示";
                    txt.innerHTML="数据处理中，请稍等...";
                    msgObj.style.height ="100px";  
                }               
              }
             } 
       
       document.getElementById("msgDiv").appendChild(btnok);  
   }
   else if(selecttype==2)//确定,取消
   {
       //确定
       var btnok=document.createElement("a"); 
       btnok.innerHTML="確定";
       btnok.style.marginTop="10px";
       btnok.style.marginBottom="5px";        
       btnok.style.width = "40px"; 
       btnok.style.height ="20px"; 
       btnok.style.border= btnborderstyle; 
       btnok.style.background=btnbgcolor;
       btnok.style.cursor="pointer"; 
       
       //取消
       var btncancel=document.createElement("a"); 
       btncancel.innerHTML="取消";
       btncancel.style.marginTop="10px";
       btncancel.style.marginBottom="5px";        
       btncancel.style.width = "40px"; 
       btncancel.style.height ="20px"; 
       btncancel.style.border= btnborderstyle; 
       btncancel.style.background=btnbgcolor;
       btncancel.style.cursor="pointer"; 
       btncancel.style.marginLeft="5px";
       
       //确定事件
       btnok.onclick=function(){ 
              document.getElementById("msgDiv").removeChild(btnok);
              document.getElementById("msgDiv").removeChild(btncancel); 
              //提交
               var theForm = document.forms['form1'];
              if (!theForm) {
                  theForm = document.form1;
              }
              if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                if(document.getElementById("__EVENTTARGET"))
                {
                    theForm.__EVENTTARGET.value = eTarget;
                    theForm.__EVENTARGUMENT.value = '';                
                    theForm.submit();
                    //服务器返回之前
                    title.innerHTML="系统提示";
                    txt.innerHTML="数据处理中，请稍等...";
                    msgObj.style.height ="100px";  
                }                
              }
             } 
       
       //取消事件      
       btncancel.onclick=function(){ 
              document.body.removeChild(bgObj); 
              document.getElementById("msgDiv").removeChild(title); 
              document.getElementById("msgDiv").removeChild(btnok);
              document.getElementById("msgDiv").removeChild(btncancel); 
              document.body.removeChild(msgObj); 
              //取消后执行
              if(cancelfun!=null&&cancelfun!='')
              {
                  cancelfun();
              }
              return false;
             } 
       
       document.getElementById("msgDiv").appendChild(btnok);       
       document.getElementById("msgDiv").appendChild(btncancel);
   }
   return false;   
}

 

.aspx 前台调用如下： 

 <asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" OnClientClick="return ShowMsg('btnSubmit','','请你确定','你确定要提交吗？',2,null);" />

 

注意：因为JS提交到服务器需要用到 __EVENTTARGET 、__EVENTARGUMENT ，要是执行时提示__EVENTTARGET为空则加入一个LinkButton控件就可以了，如：<asp:LinkButton ID="l" runat="server" style="display:none;" />

效果如下：

 

 demo: /Files/jelea/ShowDivMsg.zip