自定义弹窗示例-CSDN博客

代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <title>Confirm Example</title>
  5 <style type="text/css">
  6 .divmask {
  7     position:absolute;
  8     top:0;
  9     left:0;
10     background:#e0e0e0;
11     filter:alpha(opacity:0);
12     opacity:0.0;
13     z-Index:9998;
14     overflow:hidden;
15 }
16  .divprompt
17 {
18     font-family:Tahoma,Verdana,Segoe,sans-serif;
19     background-image:url("http://images.cnblogs.com/cnblogs_com/jiangshui/222804/r_promptbg.jpg");
20     background-repeat:no-repeat;
21     background-position:top right;
22     width:370px;
23     border:1px solid #A0C1E7;
24     position:absolute;
25     top:50%;
26     left:50%;
27     margin-left:-190px;
28     margin-top:-80px;
29     z-Index:9999;
30     padding:5px;
31     font-size:12px;
32 }
33
34 .divprompt .divtitle
35 {
36     position:relative;
37     width:350px;
38     height:20px;
39     line-height:20px;
40     color:#000000;
41     text-align:left;
42     float:left;
43     font-size:14px;
44     padding-left:5px;
45 }
46
47  .divprompt .divclose
48 {
49     position:relative;
50     width:20px;
51     height:20px;
52     line-height:20px;
53     color:#000000;
54     text-align:center;
55     float:left;
56 }
57  .divprompt .divclose input
58 {
59     border:none;
60     background:none;
61     font-size:16px;
62     font-weight:700;
63     width:16px;
64     height:16px;
65     cursor:hand;
66 }
67  .divprompt .divcontent
68 {
69     position:relative;
70     width:360px;
71     color:#000000;
72     background-color:#ffffff;
73     text-align:left;
74     float:left;
75     padding:5px;
76 }
77  .divprompt .divcontent .divico
78 {
79     position:relative;
80     color:#000000;
81     text-align:center;
82     float:left;
83     padding:10px 15px 5px 5px;
84 }
85  .divprompt .divcontent .divmessage
86 {
87     position:relative;
88     color:#000000;
89     text-align:left;
90     float:left;
91     margin-top:10px;
92 }
93  .divprompt .divcontent .divbuttons
94 {
95     position:relative;
96     width:350px;
97     color:#000000;
98     text-align:center;
99     float:left;
100 }
101  .divprompt .divcontent .divbuttons input
102 {
103     border:1px solid #A0C1E7;
104     background:none;
105     margin:0px 3px 0px 3px;
106     width:80px;
107     height:22px;
108     padding-top:3px;
109     cursor:hand;
110 }
111 </style>
112  <script type="text/javascript" language="javascript">
113
114 function XNPrompt() {
115
116     var DIVMASKID = "divmask";
117     var DIVPROMPTID = "divprompt";
118     var divmask = undefined;
119     var divprompt = undefined;
120     var showtime = undefined;
121     var hidtime = undefined;
122
123     var show = function() {
124
125         if (hidtime != undefined) {
126             window.clearTimeout(hidtime);
127         }
128          divmask = document.getElementById(DIVMASKID);
129
130         if (divmask == null || divmask == undefined) {
131             divmask = document.createElement('div');
132             divmask.id = DIVMASKID;
133             divmask.className = 'divmask';
134
135             divprompt = document.createElement('div');
136             divprompt.id = DIVPROMPTID;
137             divprompt.className = 'divprompt';
138
139             document.body.insertBefore(divprompt,document.body.firstChild);
140             document.body.insertBefore(divmask,document.body.firstChild);
141         }
142         divmask.style.width = getClientWidth();
143         divmask.style.height = getClientHeight();
144
145         divmask.style.display = "block";
146         divprompt.style.display = "block";
147
148         divmask.innerHTML = "";
149         divprompt.innerHTML = "";
150          showtime = setTimeout(showMaskDiv,10);
151     }
152
153     var close = function() {
154         if (showtime != undefined) {
155             window.clearTimeout(showtime);
156         }
157         hidtime = setTimeout(hidMaskDiv,10);
158     }
159
160     var showMaskDiv = function() {
161          if(divmask.filters.alpha.opacity < 80) {
162             divmask.filters.alpha.opacity = divmask.filters.alpha.opacity + 10;
163             setTimeout(showMaskDiv,10);
164         }
165     }
166
167      var hidMaskDiv = function() {
168         if(divmask.filters.alpha.opacity > 0) {
169             divmask.filters.alpha.opacity = divmask.filters.alpha.opacity - 10;
170             setTimeout(hidMaskDiv,10);
171         } else {
172             divmask.style.display = "none";
173             divprompt.style.display = "none";
174         }
175     }
176      var getClientWidth = function() {
177         return Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + 'px';
178     }
179
180     var getClientHeight = function() {
181         return Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + 'px';
182     }
183      var CreatePrompt = function(pmsg,ptitle,pico,pbtn1,pcallback1,pbtn2,pcallback2,pbtn3,pcallback3) {
184         show();
185         var div = undefined;
186         var control = undefined;
187         var content = undefined;
188         //Title
189         div = document.createElement("div");
190         div.className = "divtitle";
191         div.innerHTML = ptitle;
192
193         divprompt.appendChild(div);
194         //Close Button
195         div = document.createElement("div");
196         div.className = "divclose";
197         control = document.createElement("input");
198         control.type = "button";
199         control.value = "×";
200         control.onclick = function() {
201             close();
202         }
203          div.appendChild(control);
204         divprompt.appendChild(div);
205         //Content
206         content = document.createElement("div");
207         content.className = "divcontent";
208         //ICO
209         div = document.createElement("div");
210         div.className = "divico";
211         control = document.createElement("img");
212         control.src = "http://images.cnblogs.com/cnblogs_com/jiangshui/222804/r_" + pico + ".png";
213         div.appendChild(control);
214         content.appendChild(div);
215          //Message
216         div = document.createElement("div");
217         div.className = "divmessage";
218         div.innerHTML = pmsg;
219         content.appendChild(div);
220         //Buttons
221         div = document.createElement("div");
222         div.className = "divbuttons";
223          //Button
224         if (pbtn1 != "") {
225             control = document.createElement("input");
226             control.type = "button";
227             control.value = pbtn1;
228             control.onclick = function() {
229                 close();
230                 eval(pcallback1);
231             }
232             div.appendChild(control);
233         }
234          if (pbtn2 != "") {
235             control = document.createElement("input");
236             control.type = "button";
237             control.value = pbtn2;
238             control.onclick = function() {
239                 close();
240                 eval(pcallback2);
241             }
242             div.appendChild(control);
243         }
244          if (pbtn3 != "") {
245             control = document.createElement("input");
246             control.type = "button";
247             control.value = pbtn3;
248             control.onclick = function() {
249                 close();
250                 eval(pcallback3);
251             }
252             div.appendChild(control);
253         }
254         content.appendChild(div);
255         divprompt.appendChild(content);
256      }
257
258     this.Alert = function(pmsg,ptitle,pcallback) {
259         CreatePrompt(pmsg,ptitle,"w","确定",pcallback,"","","","");
260     }
261
262     this.Information = function(pmsg,ptitle,pcallback) {
263         CreatePrompt(pmsg,ptitle,"i","知道了",pcallback,"","","","");
264     }
265      this.Question = function(pmsg,ptitle,pcallback1,pcallback2) {
266         CreatePrompt(pmsg,ptitle,"q","是",pcallback1,"否",pcallback2,"","");
267     }
268
269     this.Question2 = function(pmsg,ptitle,pcallback1,pcallback2,pcalback3) {
270         CreatePrompt(pmsg,ptitle,"q","是",pcallback1,"否",pcallback2,"取消",pcalback3);
271     }
272      this.Error = function(pmsg,ptitle,pcallback1,pcallback2) {
273         CreatePrompt(pmsg,ptitle,"e","确定",pcallback1,"","","","");
274     }
275 }
276  function docreate(pobj) {
277      alert(pobj);
278 }
279
280 var xnprompt = new XNPrompt();
281 </script>
282 </head>
283 <body>
284  <input type="button" value="Alert" onclick="xnprompt.Alert('请输入密码！','系统提示','docreate(1)');"/>
285 <input type="button" value="Information" onclick="xnprompt.Information('添加成功。','系统提示','docreate(2)');"/>
286 <input type="button" value="Question1" onclick="xnprompt.Question('确认添加该记录？','系统提示','docreate(3)','docreate(4)');"/>
287  <input type="button" value="Question2" onclick="xnprompt.Question2('当前文档尚未保存，确认继续？','系统提示','docreate(5)','docreate(6)','docreate(7)');"/>
288 <input type="button" value="Error" onclick="xnprompt.Error('用户名或密码错误','系统提示','docreate(8)');"/>
289 </body>
290 </html>

转载于:https://www.cnblogs.com/jiangshui/archive/2009/12/10/1621344.html