bootstrap模态框弹出水平垂直居中
- /* center modal */
- function centerModals() {
- $('#myModal').each(function(i) {
- var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
- top = top > 0 ? top : 0;
- $clone.remove();
- $(this).find('.modal-content').css("margin-top", top);
- });
- }
- $('#myModal').on('show.bs.modal', centerModals);
- $(window).on('resize', centerModals);
其中,$(window).on('resize', centerModals); 代表用户改变浏览器时的事件,可以不用,但是改变浏览器,模态框不会跟着变化。
以上的JS代码加到页面的最后即可
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步