Vertically Centered Bootstrap Modals

vertically-centered-bootstrap-modals.js

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

});

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

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

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