最近学到了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); }); });
如果有浏览器不兼容大家再一起讨论