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

最新推荐文章于 2024-04-20 12:04:09 发布

小楫轻舟丶

最新推荐文章于 2024-04-20 12:04:09 发布

阅读量911

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/lioldamon/article/details/84861343

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：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的看这里）;