Bootstrap4模态框垂直居中,只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了。具体如下。
Bootstrap4模态框默认不会居中显示在浏览器窗口中心而是显示在窗口顶部,在很多情况下这种设计十分不美观。
百度的时候发现能找到的资料都是Bootstrap3的,而这些方法在Bootstrap4上大部分已经不适用了。
在这里先直接给出Bootstrap4上模态框居中的解决方案,后面再补充一些Bootstrap3的方案(自己并没有在Bootstrap3上尝试过)以及自己在Bootstrap4尝试这些方案的时候遇到的部分问题,以供参考。
额,说来惭愧。。。解决方案非常简单,官方文档写的清清楚楚,但是之前就是没有注意到。。。
只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了。官方示例代码效果如图,自己测试也完全没有任何问题。
失败方案:
- .align-items-center,align-self-center,align-content-center等类可以使元素数值居中,但是对模态框没有效果。
- 使用js调整模态框margin-top属性使其位于屏幕中心。margin-top = (浏览器窗口高度 - 模态框高度) / 2。
function util_set_modal_position() { let modal = $("#modal-id"); let margin_top = ($(window).height() - modal.height()) / 2 + "px"; //下面三行删除 alert($(window).height()); alert(modal.height()); alert(margin_top); //上面三行删除 modal.css("margin-top", margin_top); }
发现没有效果,百度发现模态框弹出之前是获取不到高度的,实验发现在Bootstrap4中即使模态框弹出也无法获取高度。。。alert(modal.height())的值为0或者一个很小的负数,暂时还不清楚是什么。
- 修改bootstrap.js源代码,这是原文链接,这里是Bootstrap3的源代码,Bootstrap4和它有些差异(对应代码2422行左右的位置),自己只是个前端菜狗,JavaScript都没怎么学过,自己改起来有点费劲,索性懒得改了,大佬们可以自己改一下。这种修改源代码的方法还有一个弊端就是不能使用CDN导入Bootstrap。
- 其他失败方案就不写了,方正都是失败的,也没卵用。。。