首页>>Jquery文字>>jQuery对话框和确认框 异步加载，图片等等均支持(2020-09-23)

jQuery对话框和确认框 异步加载，图片等等均支持

jQuery对话框和确认框 异步加载，图片等等均支持
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.           
  3.             <div class="col-md-12 col-sm-12">  
  4.                 <section id="quickfeatures">  
  5.                         <div class="row">  
  6.                             <div class="col-md-3">  
  7.                                 <button class="btn btn-primary btn-block example-p-1">Alerts</button>  
  8.                                 <p class="text-success">Elegant Alerts.</p>  
  9.                             </div>  
  10.                             <div class="col-md-3">  
  11.                                 <button class="btn btn-primary btn-block example-p-2">Confirmation</button>  
  12.                                 <p class="text-success">Stacked Confirmations</p>  
  13.                             </div>  
  14.                             <div class="col-md-3">  
  15.                                 <button class="btn btn-primary btn-block example-p-7-1">Act like Prompt</button>  
  16.                                 <p class="text-success">Need input?</p>  
  17.                             </div>  
  18.                             <div class="col-md-3">  
  19.                                 <button class="btn btn-primary btn-block example-p-3">Background dismiss</button>  
  20.                                 <p class="text-success">Not so important modal</p>  
  21.                             </div>  
  22.                           
  23.                             <div class="col-md-3">  
  24.                                 <button class="btn btn-primary btn-block example-p-4">Using as dialogs/modals</button>  
  25.                                 <p class="text-success">Its also a Dialog.</p>  
  26.                             </div>  
  27.                             <div class="col-md-3">  
  28.                                 <button class="btn btn-primary btn-block example-p-5">Asynchronous content</button>  
  29.                                 <p class="text-success">Loading from remote places</p>  
  30.                             </div>  
  31.                             <div class="col-md-3">  
  32.                                 <button class="btn btn-primary btn-block example-p-6">Auto-close</button>  
  33.                                 <p class="text-success">Some actions maybe critical</p>  
  34.                             </div>  
  35.                             <div class="col-md-3">  
  36.                                 <button class="btn btn-primary btn-block example-p-7">Keystrokes</button>  
  37.                                 <p class="text-success">Keyboard actions?</p>  
  38.                             </div>  
  39.                           
  40.                             <div class="col-md-3">  
  41.                                 <button class="btn btn-primary btn-block example-pc-1">Alignment</button>  
  42.                                 <p class="text-success">Automatically centered</p>  
  43.                             </div>  
  44.                             <div class="col-md-3">  
  45.                                 <button class="btn btn-primary btn-block example-pc-2">Images</button>  
  46.                                 <p class="text-success">Loading images</p>  
  47.                             </div>  
  48.                             <div class="col-md-3">  
  49.                                 <button class="btn btn-primary btn-block example-pc-3">Animations</button>  
  50.                                 <p class="text-success">Clean animations</p>  
  51.                             </div>  
  52.                         </div>  
  53.                     </section>  
  54.   
  55.   
  56.                       
  57.             </div>  
  58.   
  59.   
  60.         </div>  

 

JavaScript Code
  1. $('.example-p-6').on('click', function () {  
  2.                 $.confirm({  
  3.                     title: 'Auto close',  
  4.                     content: 'Some actions maybe critical, prevent it with the Auto close feature. This dialog will automatically trigger cancel after the timer runs out.',  
  5.                     autoClose: 'cancel|10000',  
  6.                     confirmButtonClass: 'btn-danger',  
  7.                     confirmButton: 'Delete Ben's account',  
  8.                     cancelButton: 'Close',  
  9.                     confirm: function () {  
  10.                         $.alert('You deleted Ben's account!');  
  11.                     },  
  12.                     cancel: function () {  
  13.                         $.alert('Ben just got saved!');  
  14.                     }  
  15.                 });  
  16.             });  

 


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