bootstrap的模态框modal.js居中的解决方法

最新推荐文章于 2024-09-16 10:21:10 发布

原创最新推荐文章于 2024-09-16 10:21:10 发布 · 933 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用Bootstrap的show.bs.modal事件调整模态框的位置，使其在页面上居中显示，适用于设计需求较高的场景。通过修改模态框对话框的外边距，可以实现垂直居中的效果。

问题：bootstrap的模态框默认是距离顶部30px,但是设计通常是居中的。
解决方法：
bootstrap提供了一个 show.bs.modal 的事件，代码如下

$(document).on('show.bs.modal','.modal',function(e){
	var $this= $(this);
	var $modal_dialog = $this.find('.modal-dialog');
        $this.css('display', 'block');
        $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
});

另，这个方法在 bootbox里同样可以。（还没用bootbox的看这里）;