Bootstrap4模态框垂直居中

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。
其他失败方案就不写了，方正都是失败的，也没卵用。。。

Bootstrap4模态框垂直居中相关推荐

Bootstrap4 模态框垂直居中，在modal-dialog添加一个modal-dialog-centered
bootstrap 模态框垂直居中实现方法
2019独角兽企业重金招聘Python工程师标准>>> this.$element.css({paddingLeft: !this.bodyIsOverflowing &&a ...
bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
Bootstrap4+MySQL前后端综合实训-Day03-AM【折叠、模态框】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录折叠菜鸟教程--Bootstrap--折叠模态框菜鸟教程--Bootstrap- ...
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
bootstrap弹出的模态框水平垂直居中的实现
学习javascript从入门到放弃!,这是第一篇随笔,经验不足,如有不当之处,还望指出.好了废话不多说直接切入正题吧 1.bootstrap默认的model写法: //触发模态框的button &l ...
三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）
1.1 警告提示框 1.2 徽章和面包屑 1.3 按钮和按钮组 1.4 卡片 1.5 列表组 1.6 导航和选项卡 1.7 分页和进度条 1.8 巨幕和旋转图标 1.9 轮播图 1.10 折叠菜单 1 ...
bootstrap 模态框无法使用_22 模态框Modal教程（plotly Dash Bootstrap版）
今天第22课,本节课程主要学习Dash Bootstrap Components中的模态框Modal,类似页面中常见的对话框,在python web网页设计中较为常用.欣赏一首很甜蜜安静的钢琴曲< ...

Bootstrap4模态框垂直居中

Bootstrap4模态框垂直居中，只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了。具体如下。

Bootstrap4模态框垂直居中相关推荐

最新文章

热门文章