首页>>Jquery文字>>弹出对话框Dialogify(2022-01-02)

弹出对话框Dialogify

弹出对话框Dialogify
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="mdl-grid">  
  2.                         <div class="mdl-layout-spacer"></div>  
  3.                         <div class="mdl-cell mdl-cell--10-col">  
  4.                             <h5 class="mdl-typeography--headline">Example - Modal Dialogify</h5>  
  5.                             <button id="demo2" type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">try it</button>  
  6.                              
  7.                         </div>  
  8.                         <div class="mdl-layout-spacer"></div>  
  9.                     </div>  

 

JavaScript Code
  1. $('#demo2').click(function(){  
  2.             let html = '<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sapien lacus. Ut a eros quis lacus auctor aliquet eu.</b>';  
  3.             let dialogify = new Dialogify(html)  
  4.                 .title('Modal Dialogify')  
  5.                 .buttons([  
  6.                     {  
  7.                         type: Dialogify.BUTTON_DANGER,  
  8.                         click: function(e){  
  9.                             console.log('danger-style button click');  
  10.                             this.close();  
  11.                         }  
  12.                     },  
  13.                     '<a class="btn btn-insert" href="javascript:;">other action</a>'  
  14.                 ], {position: Dialogify.BUTTON_CENTER});  
  15.   
  16.             dialogify  
  17.                 .on('show', function(){  
  18.                     this.$buttonList[1].disable();  
  19.                     console.log('show: ' + this.isOpen());  
  20.                 })  
  21.                 .on('close', function(){  
  22.                     console.log('close: ' + this.isOpen());  
  23.                 })  
  24.                 .on('cancel', function(){  
  25.                     console.log('cancel');  
  26.                 });  
  27.   
  28.             dialogify.showModal();  
  29.         });  

 


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