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

核心提示：无意间对163邮箱的层确认对话框产生了兴趣，弹出一个层来询问用户的操作，弹出一个层来让用户确认操作，其它部分用阴影覆盖，看上去比较爽，于是决定做一个这样的样式用于公司的OA系统中，以下是JS实现代码：1//eTarget: 按钮ID2//eArgument: 按钮事件参数,一般为''.3//msgtit

无意间对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
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}