Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vertically Centered Bootstrap Modals
/**
* 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);
});
});
@claviska

This comment has been minimized.

Copy link
Owner Author

claviska commented Jan 16, 2015

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);
  }
@onlinerahul

This comment has been minimized.

Copy link

onlinerahul commented Mar 22, 2016

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');

     // 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);
 }); 

Here i have created Plunker, Please have a look the issue. https://plnkr.co/edit/jjfMjRpKdOrkWTMF1ePJ?p=preview

@Graahf

This comment has been minimized.

Copy link

Graahf commented Apr 14, 2016

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
You can’t perform that action at this time.