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

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

Code
  1 // eTarget:   按钮ID
  2 // eArgument: 按钮事件参数,一般为''.
  3 // msgtitle:  提示信息的标题.
  4 // msgcontent:提示信息的内容.
  5 // selecttype:弹出的对话框类型.
  6 // cancelfun: 当用户点击取消按钮时要执行的客户端Javascript函数.无则传入null.
  7 function  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
100     {
101        title.setAttribute( " align " , " left " ); 
102        title.innerHTML = msgtitle;         
103    }
104    
105    document.body.appendChild(msgObj); 
106    document.getElementById( " msgDiv " ).appendChild(title); 
107     var  txt = document.createElement( " p " ); 
108    txt.style.margin = " 1em 0 " ;
109    txt.setAttribute( " id " , " msgTxt " ); 
110    txt.innerHTML = msgcontent; 
111    document.getElementById( " msgDiv " ).appendChild(txt);  
112    
113     // add buttom
114     if (selecttype == 1 ) // 确定
115     {
116         // buttom
117         var  btnok = document.createElement( " a " ); 
118        btnok.innerHTML = " OK " ;
119        btnok.style.marginTop = " 10px " ;
120        btnok.style.marginBottom = " 5px " ;      
121        btnok.style.width  =   " 40px " ; 
122        btnok.style.height  = " 20px " ; 
123        btnok.style.border =  btnborderstyle; 
124        btnok.style.background = btnbgcolor;
125        btnok.style.cursor = " pointer " ; 
126        
127         // 确定事件
128        btnok.onclick = function () { 
129               document.getElementById( " msgDiv " ).removeChild(btnok);
130                // 提交
131                  var  theForm  =  document.forms[ ' form1 ' ];
132                if  ( ! theForm)  {
133                   theForm  =  document.form1;
134               }
135                if  ( ! theForm.onsubmit  ||  (theForm.onsubmit()  !=   false ))  {
136                  if (document.getElementById( " __EVENTTARGET " ))
137                  {
138                     theForm.__EVENTTARGET.value  =  eTarget;
139                     theForm.__EVENTARGUMENT.value  =   '' ;                
140                     theForm.submit();
141                      // 服务器返回之前
142                     title.innerHTML = " 系统提示 " ;
143                     txt.innerHTML = " 数据处理中，请稍等... " ;
144                     msgObj.style.height  = " 100px " ;  
145                 }                
146               }
147              }  
148        
149        document.getElementById( " msgDiv " ).appendChild(btnok);  
150    }
151     else   if (selecttype == 2 ) // 确定,取消
152     {
153         // 确定
154         var  btnok = document.createElement( " a " ); 
155        btnok.innerHTML = " 確定 " ;
156        btnok.style.marginTop = " 10px " ;
157        btnok.style.marginBottom = " 5px " ;        
158        btnok.style.width  =   " 40px " ; 
159        btnok.style.height  = " 20px " ; 
160        btnok.style.border =  btnborderstyle; 
161        btnok.style.background = btnbgcolor;
162        btnok.style.cursor = " pointer " ; 
163        
164         // 取消
165         var  btncancel = document.createElement( " a " ); 
166        btncancel.innerHTML = " 取消 " ;
167        btncancel.style.marginTop = " 10px " ;
168        btncancel.style.marginBottom = " 5px " ;        
169        btncancel.style.width  =   " 40px " ; 
170        btncancel.style.height  = " 20px " ; 
171        btncancel.style.border =  btnborderstyle; 
172        btncancel.style.background = btnbgcolor;
173        btncancel.style.cursor = " pointer " ; 
174        btncancel.style.marginLeft = " 5px " ;
175        
176         // 确定事件
177        btnok.onclick = function () { 
178               document.getElementById( " msgDiv " ).removeChild(btnok);
179               document.getElementById( " msgDiv " ).removeChild(btncancel); 
180                // 提交
181                 var  theForm  =  document.forms[ ' form1 ' ];
182                if  ( ! theForm)  {
183                   theForm  =  document.form1;
184               }
185                if  ( ! theForm.onsubmit  ||  (theForm.onsubmit()  !=   false ))  {
186                  if (document.getElementById( " __EVENTTARGET " ))
187                  {
188                     theForm.__EVENTTARGET.value  =  eTarget;
189                     theForm.__EVENTARGUMENT.value  =   '' ;                
190                     theForm.submit();
191                      // 服务器返回之前
192                     title.innerHTML = " 系统提示 " ;
193                     txt.innerHTML = " 数据处理中，请稍等... " ;
194                     msgObj.style.height  = " 100px " ;  
195                 }                 
196               }
197              }  
198        
199         // 取消事件      
200        btncancel.onclick = function () { 
201               document.body.removeChild(bgObj); 
202               document.getElementById( " msgDiv " ).removeChild(title); 
203               document.getElementById( " msgDiv " ).removeChild(btnok);
204               document.getElementById( " msgDiv " ).removeChild(btncancel); 
205               document.body.removeChild(msgObj); 
206                // 取消后执行
207                if (cancelfun != null && cancelfun != '' )
208                {
209                   cancelfun();
210               }
211                return   false ;
212              }  
213        
214        document.getElementById( " msgDiv " ).appendChild(btnok);       
215        document.getElementById( " msgDiv " ).appendChild(btncancel);
216    }
217     return   false ;   
218 }

.aspx 前台调用如下： 

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

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