Forked from claviska/vertically-centered-bootstrap-modals.js
Created
February 10, 2017 20:03
-
-
Save odixon/9c3788983d110ba24687944b14f5b8e8 to your computer and use it in GitHub Desktop.
Vertically Centered Bootstrap Modals
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment