jquery 美化弹出提示 漂亮的Dialog 对话框

三个不同的效果，分别是普通的警告,确认/取消,带一个输入框

本例用了jquery.alertify.js，请到演示页面查看

css文件也请到演示页面查看

演示

 

 

JavaScript Code

1. <script type="text/javascript">  
2. $(document).ready(function() {  
3.     $(".alert").click(function() {  
4.         var message = "<h3>Alert Dialog</h3><p>Example of an <strong>Alert Dialog</strong>. You can put any message over here.</p><br/>";  
5.   
6.         alertify.alert(message);  
7.     });  
8.   
9.     $(".confirm").click(function() {  
10.         var message = "<h3>Confirm Dialog</h3><p>Do you want to confirm this?</p><br/>";  
11.   
12.         alertify.confirm(message, function (e) {  
13.             if(e) {  
14.                 alertify.success("You clicked <strong>OK</strong>");  
15.             } else {  
16.                 alertify.error("You clicked <strong>Cancel</strong>");  
17.             }  
18.         });  
19.     });  
20.   
21.     $(".prompt").click(function() {  
22.         var message = "<h3>Prompt Dialog</h3><p>Please enter a value over here.</p><br/>";  
23.   
24.         alertify.prompt(message, function (e, str) {  
25.             if(e) {  
26.                 alertify.success("You typed <strong>"+str+"</strong>");               
27.             } else {  
28.                 alertify.error("You clicked <strong>Cancel</strong>");  
29.             }  
30.         }, "Enter a value");  
31.     });  
32. });  
33. </script>  

 

XML/HTML Code

1. <div class="container">  
2.         <ul>  
3.             <li><a href="#" class="alert">警告对话框</a></li>  
4.             <li><a href="#" class="confirm">确认/取消对话框</a></li>  
5.             <li><a href="#" class="prompt">带输入框的对话框</a></li>  
6.         </ul><br/>  
7.   
8.           
9.   
10.     </div>  

 

原文地址:http://www.freejs.net/article_biaodan_83.html