CODE CODIFY.CLUB

Bootstrap 3 – How to center the modal window

Note : Put code after bootstrap.min.js

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

V!ral

Developer, Technology aficionado, Beer Lover and founder of codify.club Network. Who shares a keen interest about website development, health issues, cancer awareness and other fun stuff.

Add comment

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed