首页>>表单>>jquery 美化弹出提示 漂亮的Dialog 对话框(2013-10-28)

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

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

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

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

jquery 美化弹出提示 漂亮的Dialog 对话框
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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