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

使用方法

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

<link rel="stylesheet" href="jquery.msgBox.min.css">
<script src="jquery.min.js"></script>
<script src=jquery.msgBox.min.js"></script>
调用对话框

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

$('.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'
});

jquery.msgBox.js对话框插件的github地址为：https://github.com/marwils/jquery.msgBox.js