Last active
May 15, 2020 06:29
-
-
Save claviska/ab56d08bb19d011e3c35 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); | |
}); | |
}); |
If you use loaded instead of show, you can center ajax based modals, where content are loaded on click.
$('.modal').on('loaded.bs.modal', reposition);
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am facing issue with set height of modal window according to device view port The issue is that I am trying to achieve vertically center Bootstrap 3 modals using .height() function of modal window according to device view port, which is working perfectly fine
but on Iframe where i am having long list of content my model gets in center of the iFrame and not in screen, User have to scroll long list of content to see the modal
I am using Below code
iFramePage.html iframe src="insideIframePage.html"
insideIframePage.html
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
button type="button" class="btn-block btn-secondary" data-toggle="modal" data-target="#delete-popup" Click here to see Modal /button**
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
button type="button" class="btn-block btn-secondary" data-toggle="modal" data-target="#delete-popup" Click here to see Modal /button
[...]
[...]
MyIframe.JS
/** * Vertically center Bootstrap 3 modals so they aren't always stuck at the top */
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
Here i have created Plunker, Please have a look the issue. https://plnkr.co/edit/jjfMjRpKdOrkWTMF1ePJ?p=preview