Bootstrap实践之弹出框插件（一）

Bootstrap

---

基本介绍

弹出框插件也是日常开发中最常用的插件之一，关于bootstrap的弹出框插件我也仅仅找到2个看起来不错的（不是资源太少，而是我见识太少），分别是bootbox与sweetalert，本文不对它俩的优劣做评价，对于后者仅限于单词拼写上，重点在于bootbox上。

bootbox是支持bootstrap各种新版本的实现（目前支持 V4.4.1），含有丰富的函数封装，包括alert、confirm、loading、dialog等多种应用场景，可支持弹出窗口参数的各种自定义，是本人较为喜欢的弹出插件，本文主要参考官网上的示例并结合自身使用经验总结分享而来，查看本文单页示例地址：“/demo/bootstrap/dialog/bootboxBasic.html”。

示例环境

jQuery v3.4.1 + Bootstrap v4.4.1 + Bootbox v5.4.0 + Prism v1.19.0（可选：代码语法着色插件）

说明

（1）bootbox设置窗口居中有两种方式，本示例中有详细介绍与实现；

（2）为了使得页面效果运行最佳，可以点击上述的单页示例地址，进行示例预览；

（3）如果正式使用时存在跨iframe的弹出窗口，个人建议将插件在父页面进行引用，同时调用父页面的bootbox对象，使得弹出iframe的上层页面，效果更佳；

一些示例

/*

 * 窗口居中的一种实现，摘自bootbox官网Examples页面page.css

 * bootstrap 4.2以上版本使用自带居中属性

 */

.modal-dialog {

    margin-top: 0;

    margin-bottom: 0;

    display: -webkit-box;

    display: flex;

    height: 100%;

}

.modal-content {

    margin-top: auto;

    margin-bottom: auto;

    border: none;

}

参考代码

https://gitee.com/88911006/chendd-examples/tree/master/bootstrap

补充说明

（1）bootstrap主题的弹出框除了本文介绍的《bootbox》外，前段时间又找到《jquery-confirm》，官网地址为“https://www.jquery-confirm.cn/index.html”，整体上的体验也还挺不错的；

（2）这两款插件的优劣对比不做对比，发现jquery-confirm插件多了可以移动的效果；

（3）如果想要实现提示窗口的移动，弹出页面窗口的最大化、最小化，不行还是使用layer吧，参考地址“https://layui.gitee.io/v2/docs/modules/layer.html”、“https://layui.gitee.io/v2/layer/”；

（4）顺便提一下《Vusui-layer》，官网地址“https://www.vusui.com/”，大佬重构的Layer弹层组件；

 点赞

---

 发表评论

---

 评论列表

---