关于Bootstrap modal 垂直居中

最新推荐文章于 2023-08-16 17:43:20 发布

原创最新推荐文章于 2023-08-16 17:43:20 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #moal #垂直居中 #ViewUI

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种实现Bootstrap Modal对话框垂直居中的方法。第一种是在样式表中添加CSS来实现，第二种是通过简单的JavaScript代码实现。这两种方法均可解决Modal默认仅水平居中的问题。

最近学到了bootstrap的modal，发现它只是左右居中偏上，并不是垂直居中的，想把它弄成垂直也居中，查了好多资料无果，最终去google了下，终于找到了合适的答案，转一些外文

方法一：style里加个css

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

然后dialog加上这个class就好了

<div class="modal-dialog modal-vertical-centered">

方法二：只加一段js

$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
//将margin-top定义为窗口高和dialog高的二分之一
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// 模块show时，执行
$('.modal').on('show.bs.modal', reposition);
// 模块resize时执行
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});

如果有浏览器不兼容大家再一起讨论