WEB开发网
开发学院网页设计JavaScript 弹出一个层来让用户确认操作 阅读

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

 2010-09-14 13:38:14 来源:WEB开发网   
核心提示:无意间对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}

1 2  下一页

Tags:一个 用户 确认

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接