bootstrap模态框垂直居中

个人不太建议修改源码,所以,还是写了个方法来用:

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);   
  });   
};

用的时候:

$(function() {
  //页面大小变化是仍然保证模态框水平垂直居中
    $('#myModal').on('show.bs.modal', centerModals);
    $("#enter3-btn").on('click',function(){
      $('#myModal').modal({
        backdrop:'static',
        show:true
      });
    })
    //页面大小变化是仍然保证模态框水平垂直居中
    $(window).on('resize', centerModals);
      
});

 

posted @ 2017-11-23 14:05  最爱小虾  阅读(471)  评论(0)    收藏  举报