bootstrap模态框弹出水平垂直居中


  1. /* center modal */  
  2. function centerModals() {   
  3.     $('#myModal').each(function(i) {   
  4.         var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
  5.         top = top > 0 ? top : 0;   
  6.         $clone.remove();   
  7.         $(this).find('.modal-content').css("margin-top", top);   
  8.     });   
  9. }   
  10. $('#myModal').on('show.bs.modal', centerModals);   
  11. $(window).on('resize', centerModals);  

其中,$(window).on('resize', centerModals); 代表用户改变浏览器时的事件,可以不用,但是改变浏览器,模态框不会跟着变化。

以上的JS代码加到页面的最后即可

原文地址:https://www.cnblogs.com/qdphr/p/5897292.html