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

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

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

非常好用的bootstrap4 dialog弹框插件

帝国模板之家 2020-12-03 网页特效 评论

插件介绍

这是基于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){}
  
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

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

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

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