html聊天框样式插件,轻量级Material Design风格jquery对话框插件

jquery.msgBox.js是一款轻量级的Material Design风格jquery对话框插件。它压缩后的版本仅1kb，并且允许自定义对话框的图标，以及设置回调函数。

使用方法

在页面引入jquery.msgBox.min.css，jquery，jquery.msgBox.min.js文件。

调用对话框

可以使用下面的方法来调用对话框。

$('.msgBox-testArea').msgBox({

title: '对话框的标题',

message: '对话框中的内容。。。'

});

你也可以为对话框添加自定义的按钮。

$('.msgBox-testArea').msgBox({

title: '对话框的标题',

message: '对话框中的内容。。。',

buttons: [{

text: 'Show',

callback: function() {

// 这里是回调函数

}

},

{

text: 'Hide',

callback: function() {

// 这里是回调函数

}

}],

});

还可以为对话框设置淡入淡出效果。

$('.msgBox-testArea').msgBox({

title: '对话框的标题',

message: '对话框中的内容。。。',

buttons: [{

text: 'Show',

callback: function() {

// 这里是回调函数

}

},

{

text: 'Hide',

callback: function() {

// 这里是回调函数

}

}],

blend: true,

blendDuration: 400

});

设置对话框的图标

你可以为对话框设置一些内置的图标，可用的图标有：

check

download

exclamation

info

lock

unlock

play

plus

question

remove

stop

例如：

$('.msgBox-testArea').msgBox({

type: 'question'

});