漂亮的js消息确认框

代码

  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