Skip to content

Instantly share code, notes, and snippets.

@sniperwolf
Created October 21, 2014 22:26
Show Gist options
  • Save sniperwolf/cc695d44f63ed767772f to your computer and use it in GitHub Desktop.
Save sniperwolf/cc695d44f63ed767772f to your computer and use it in GitHub Desktop.
Centering Bootstrap's Modals using JavaScript and CSS
/**
* 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" );
}
})();
/**
* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment