bootstrap4简单实用的多功能弹框插件

演示  website 下载

一个简单的JavaScript（jQuery）Bootstrap框架插件，用户无需编写任何HTML代码，可动态创建多功能bootstrap4弹框。支持设置弹窗标题和内容，自动关闭时间、自定义按钮等。可用于提示，用户确认弹框。

1. 在html页面中加载bootstrap4框架和插件文件。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="/path/to/dist/js/bootstrap4dialog.min.js"></script>

2. 创建一个带标题和内容的简单弹窗。

Bootstrap4Dialog.show({
  title: 'Sample Title 1', 
  message: 'Message text goes here'
});

3. 创建一个类似吐司的提示框，3秒后可自动关闭。

Bootstrap4Dialog.show({
  message: 'Toast Message Here', 
  duration: 5
});

4. 自定义按钮

Bootstrap4Dialog.show({
  title: 'Confirm Dialog',
  message: 'Are You Sure',
  buttons: [{
    id: 'btn-cancel',
    label: 'Cancel',
    cssClass: 'btn btn-light',
    action: function(dialog) {
      dialog.modal('hide');
    }
  },
  {
    id: 'btn-submit',
    label: ' Submit',
    cssClass: 'btn btn-sm btn-danger',
    action: function(dialog) {
      alert('fake form submittion..');
      dialog.modal('hide');
    }
  }]
})

5. 支持的类型

Bootstrap4Dialog.TYPE_PRIMARY = "primary";
Bootstrap4Dialog.TYPE_SECONDARY = "secondary";
Bootstrap4Dialog.TYPE_SUCCESS = "success";
Bootstrap4Dialog.TYPE_DANGER = "danger";
Bootstrap4Dialog.TYPE_WARNING = "warning";
Bootstrap4Dialog.TYPE_INFO = "info";
Bootstrap4Dialog.TYPE_LIGHT = "light";
Bootstrap4Dialog.TYPE_DARK = "dark";
Bootstrap4Dialog.show({
  type: Bootstrap4Dialog.TYPE_LIGHT
})

6. 设置按钮的大小。选项：

Bootstrap4Dialog.SIZE_SMALL = "modal-sm";
Bootstrap4Dialog.SIZE_MEDIUM = "";
Bootstrap4Dialog.SIZE_LARGE = "modal-lg";
Bootstrap4Dialog.SIZE_EXTRA_LARGE = "modal-xl";
Bootstrap4Dialog.show({
  size: Bootstrap4Dialog.SIZE_SMALL
})

7. 是否显示背景。选项：

Bootstrap4Dialog.BACKDROP_YES = "true";
Bootstrap4Dialog.BACKDROP_NO = "";
Bootstrap4Dialog.BACKDROP_STATIC = "static";
Bootstrap4Dialog.show({
  backdrop: Bootstrap4Dialog.BACKDROP_NO
})

8. 是否允许窗口“可滚动”。默认值：false。

Bootstrap4Dialog.show({
  scrollable: true
})

9. 隐藏后是否自动关闭窗口。默认值：true。

Bootstrap4Dialog.show({
  autodestroy: false
})

10. 当窗口关闭并隐藏时触发自定义函数。默认值：true。

Bootstrap4Dialog.show({
  open: function() {
    // do something
  },
  close: function() {
    // do something
  }
})

11. 手动关闭窗口

instance.modal('hide');

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。