帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

本栏目分享一些实用的网页图片特效、网页导航特效、网页菜单特效、网页文字特效等js、jquery、css网页特效。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-09 网页特效 评论

一个简单的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');

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

遗憾,悲伤,喜悦,怨恨,人们在不同时期,会流不同性质的眼泪。 情绪最好不要强行压抑,想哭就哭,想笑就笑,这样反而有利于身心。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言