How to solve the problem that the BootStrap modal box is not vertically centered

This article mainly introduces in detail the solution to the problem that the BootStrap modal box is not vertically centered. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Solution: The modal box that comes with BootStrap is not vertically centered

Solution: Call the method provided by BootStrap $('.modal').on('show .bs.modal', function(){});

We use JS to modify the Top value of the modal box before it is displayed.

The specific code is as follows:

/** 
 * 垂直居中模态框 
 **/ 
function centerModals() { 
  $('.modal').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 > 50 ? top : 0; 
    $clone.remove(); 
    $(this).find('.modal-content').css("margin-top", top - 50); 
  }); 
} 
// 在模态框出现的时候调用垂直居中方法 
$('.modal').on('show.bs.modal', centerModals); 
// 在窗口大小改变的时候调用垂直居中方法 
$(window).on('resize', centerModals);

Related recommendations:

AJAX and SpringMVC implement the paging query function of bootstrap modal box Detailed explanation

bootstrap modal Box nesting, tabindex attribute, and shadow removal methods

Technical explanation for bootstrap modal box

The above is the detailed content of How to solve the problem that the BootStrap modal box is not vertically centered. For more information, please follow other related articles on the PHP Chinese website!