Centering Bootstrap's Modals using JavaScript and CSS

main.js

/**
 * Centering Modals of Twitter Bootstrap
 * 
 * @return void
 */
(function () {
  var adjust_modal_max_height_and_position, $window;

  $window = $( window );

  /**
   * Adjust the modal max height and its Position
   *
   * @link http://goo.gl/9uBpO0, http://goo.gl/8kO0Rv
   * @return void
   */
  adjust_modal_max_height_and_position = function () {
    $( ".modal" ).each(function () {

      var $this, contentHeight, headerHeight, footerHeight;

      $this = $( this );

      if ( ! $this.hasClass( "in" ) ) {
        $this.show();
      }

      contentHeight = $window.height() - 60;
      headerHeight  = $this.find( ".modal-header" ).outerHeight() || 2;
      footerHeight  = $this.find( ".modal-footer" ).outerHeight() || 2;

      $this.find( ".modal-content" ).css({
        "max-height": function () {
          return contentHeight;
        }
      });

      $this.find( ".modal-body" ).css({
        "max-height": function () {
          return contentHeight - ( headerHeight + footerHeight );
        }
      });

      $this.find( ".modal-dialog" ).addClass( "modal-dialog-center" ).css({
        "margin-top": function () {
          return - ( $( this ).outerHeight() / 2 );
        },
        "margin-left": function () {
          return - ( $( this ).outerWidth() / 2 );
        }
      });

      if ( ! $this.hasClass( "in" ) ) {
        $this.hide();
      }
    });
  };

  if ( $window.height() >= 320 ) {
    $window.resize( adjust_modal_max_height_and_position ).trigger( "resize" );
  }

})();

main.scss

/**
 * CSS class to centering Modals of Twitter Bootstrap
 *
 * @link http://goo.gl/9uBpO0, http://goo.gl/8kO0Rv
 */
.modal-dialog-center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;

	@media (max-width: $screen-sm) { // 767px
		width: 100%;
	}

}
.modal-body {
	overflow-y: auto;
}
.modal-footer {
	margin-top: 0;
}