弹出对话框Dialogify-freejs.net代码演示

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

弹出对话框Dialogify

XML/HTML Code

<div class="mdl-grid">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--10-col">
<h5 class="mdl-typeography--headline">Example - Modal Dialogify</h5>
<button id="demo2" type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">try it</button>
</div>
<div class="mdl-layout-spacer"></div>
</div>

JavaScript Code

$('#demo2').click(function(){
let html = '<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sapien lacus. Ut a eros quis lacus auctor aliquet eu.</b>';
let dialogify = new Dialogify(html)
.title('Modal Dialogify')
.buttons([
{
type: Dialogify.BUTTON_DANGER,
click: function(e){
console.log('danger-style button click');
this.close();
}
},
'<a class="btn btn-insert" href="javascript:;">other action</a>'
], {position: Dialogify.BUTTON_CENTER});
dialogify
.on('show', function(){
this.$buttonList[1].disable();
console.log('show: ' + this.isOpen());
})
.on('close', function(){
console.log('close: ' + this.isOpen());
})
.on('cancel', function(){
console.log('cancel');
});
dialogify.showModal();
});