Vertical center Bootstrap 3 modals

Simple jQuery fix to vertically centered modals, plus some other fixes

Alert

Include the most recent version of Bootstrap (>= 3.3.1) because previous versions of Bootstrap 3 have issues with modals.

The Code

Demo

Demo and source code

Here's the simple script that centers the modals:

/* center modal */
function centerModals(){
  $('.modal').each(function(i){
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = ($clone.height() - $clone.find('.modal-content').height()) / 2;
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
  });
}
$('.modal').on('show.bs.modal', centerModals);
$(window).on('resize', centerModals);

Also add this Css fix for the modal's orizzontal spacing; we show the scroll on the modals, the body scrolls is hidden automatically by Bootstrap:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}