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

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
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 前台调用如下： 

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;" />

效果如下：