Bootstrap实践之弹出框插件(一)

Bootstrap
placeholder image
admin 发布于:2020-03-03 22:45:51
阅读:loading

基本介绍

弹出框插件也是日常开发中最常用的插件之一,关于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;

}


image.png

弹出框.gif

参考代码

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弹层组件;


 点赞


 发表评论

当前回复:作者

 评论列表


留言区