html5ify插件,漂亮的jQuery对话框插件Dialogify

这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框， 可以生成漂亮的对话框效果。

使用方法

在页面中引入jquery和dialogify.min.js文件和样式文件dialogify.css。

初始化插件

最简单的使用方法如下：

Dialogify.alert('这是一个Alert');

可以创建带确认和取消按钮的对话框。

Dialogify.confirm('Are You Sure?', {

ok: function(){

// confirm callback

},

cancel: function(){

// cancel callback

}

});

也可以创建prompt对话框。

Dialogify.prompt('What\'s your name ?', {

placeholder: 'Enter your name',

ok: function(val){

Dialogify.alert('Hi! ' + val);

},

cancel: function(){

Dialogify.alert('canceled');

}

});

还可以通过面板创建自定义的对话框。

Modal Content Here

new Dialogify('#template')

.title('Dialogify') // dialog title

.buttons([ // custom buttons

{

text: 'Cancel',

click: function(e){

console.log('cancel click');

this.close();

}

},

{

text: 'Okey',

type: Dialogify.BUTTON_PRIMARY,

click: function(e){

console.log('ok click, title value: ' + this.$content.find('input.text-field').val());

}

}

])

.show(); // shows the modal

});

通过HTML标签创建对话框。

let html = 'modal content here';

let dialogify = new Dialogify(html)

.title('Modal Dialogify')

.buttons([

{

type: Dialogify.BUTTON_DANGER,

click: function(e){

console.log('danger-style button click');

this.close();

}

},

'other action'

], {position: Dialogify.BUTTON_CENTER});

dialogify.showModal();

通过ajax调用内容。

var options = {

ajaxPrefix: '',

ajaxData: {var1: 'hello world'},

ajaxComplete: function(){

console.log('ajax complete');

this.buttons([{

type: Dialogify.BUTTON_PRIMARY

}]);

}

};

new Dialogify('ajax.html', options)

.title('Ajax Dialogify')

.show();