bootstrap and bootbox: set dialog box center of the screen

Modal is already centered in horizontal direction. If you want vertical centered modal, hope this will work for you

bootbox.alert('Danger!!' ).find('.modal-content').css({
    'background-color': '#f99',
    'font-weight' : 'bold',
    'color': '#F00',
    'font-size': '2em',
    'margin-top': function (){
        var w = $( window ).height();
        var b = $(".modal-dialog").height();
        // should not be (w-h)/2
        var h = (w-b)/2;
        return h+"px";
    }
});

Giving this answer according to your example.


If you want a vertical centered bootbox modal via css3

.modal-open .modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

You can have more flexibility here: https://www.kirupa.com/html5/centering_vertically_horizontally.htm https://css-tricks.com/snippets/css/a-guide-to-flexbox/


This question is quite old, but another short option would be to use the corresponding bootstrap class:

bootbox.alert('Danger!!') .find(".modal-dialog") .addClass("modal-dialog-centered");

This works with Bootstrap v4.0.0 or higher.


As of Bootbox 5, you can actually enable this via an option, centerVertical:

bootbox.alert({
    message: "I'm a vertically-centered dialog!",
    centerVertical: true
});