弹出一个层来询问用户的操作，其它部分用阴影覆盖，看上去比较爽，于是决定做一个这样的样式用于公司的OA系统中。以下是JS实现代码：
//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 前台调用如下
注意：因为JS提交到服务器需要用到 __EVENTTARGET 、__EVENTARGUMENT ，要是执行时提示__EVENTTARGET为空则加入一个LinkButton控件就可以了，如：
效果如下：
demo: /Files/jelea/ShowDivMsg.zip
本文作者:轻风博客 来源:http://www.cnblogs.com/jelea/archive/2009/02/07/13
CIO之家 www.ciozj.com 微信公众号:imciow 免责声明:本站转载此文章旨在分享信息，不代表对其内容的完全认同。文章来源已尽可能注明，若涉及版权问题，请及时与我们联系，我们将积极配合处理。同时，我们无法对文章内容的真实性、准确性及完整性进行完全保证，对于因文章内容而产生的任何后果，本账号不承担法律责任。转载仅出于传播目的，读者应自行对内容进行核实与判断。请谨慎参考文章信息，一切责任由读者自行承担。