非常好用的bootstrap4 dialog弹框插件

演示  website 下载

插件介绍

这是基于bootstrap4框架的弹框插件，可以是bootstrap4的弹框更加漂亮，响应式迅速的动态警报/确认对话框和复杂模式窗口。

使用方法

1. 在html页面加载bootstrap框架和jquery库。

<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.slim.min.js"></script>
<script src="bootstrap.min.js"></script>

2. 在jquery库后加载bootstrap-show-modal.js插件文件。

<script src="src/bootstrap-show-modal.js"></script>

3. 使用JavaScript创建一个带有确认按钮的弹框。

$.Modal.alert({
  title: "弹框标题", 
  body: "弹框内容"
})

4. 使用JavaScript创建基础弹框。

$.Modal.show({
   title: "弹框标题", 
   body: "弹框内容"
})

5. 使用JavaScript创建带有确认和取消按钮的弹框。

$.Modal.confirm({
  title: "Confirm Dialog", 
  body: "Are You Sure", 
  textTrue: "Okey", 
  textFalse: "Cancel",
  confirmed: function (result) {
    if (result) {
      // do something
    } else {
      // do something
    }
  },
  hidden: function () {
    // do something
  }
})

6. 所有默认选项。

{

  // modal title
  title: "",

  // modal body
  body: "",

  // modal footer
  footer: "", 

  // additional CSS class(es)
  modalClass: "fade",

  // additional CSS class(es) for ".modal-dialog"
  modalDialogClass: "", 

  // Bootstrap 4 modal's options
  options: null

  // called after created
  onCreate: null,

  // called after disposed
  onDispose: null,

  // called after confirmed
  // $.showConfirm only
  onSubmit: function(result, modal){}
  
}