Vertically Centered Bootstrap Modals

vertically-centered-bootstrap-modals.js

/**
 * Vertically center Bootstrap 3 modals so they aren't always stuck at the top
 */
$(function() {

    function reposition() {

        var modal = $(this),
            dialog = modal.find('.modal-dialog');

        modal.css('display', 'block');
        
        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));

    }

    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);

    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });

});

This works better when you change the default transition. For example, in modals.less:

.modal {

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    //.translate3d(0, -25%, 0);
    .scale(0);
    .transition-transform(~"0.2s ease-out");
  }
  &.in .modal-dialog {
    //.translate3d(0, 0, 0);
    .scale(1);
  }