Skip to content

Instantly share code, notes, and snippets.

@claviska
Last active May 15, 2020 06:29
Show Gist options
  • Save claviska/ab56d08bb19d011e3c35 to your computer and use it in GitHub Desktop.
Save claviska/ab56d08bb19d011e3c35 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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
Copy link

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
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