bootstrap and bootbox: set dialog box center of the screen

Question

I am using bootbox.js from http://bootboxjs.com/examples.html and it is quite impressive. But I have an issue while setting up the location of the dialog box.

I want to place dialog box center of the screen. I am using this code but dialog box stays on top of the screen.

 bootbox.alert('Danger!!').find('.modal-content').css({
     'background-color': '#f99',
     'font-weight': 'bold',
     color: '#F00',
     'top': '50%',
     'margin-top': function() {
         return -(box.height() / 2);
     },
     'font-size': '2em',
     'font-weight': 'bold'
 });

Please advise how can set the dialog box center of the screen.

Does other CSS attributes worked in the above example? – M B Parvez Jun 27 '16 at 08:12 — M B Parvez, Jun 27 '16 at 08:12

Tieson T. · Accepted Answer · 2021-06-22T22:23:26.453

20

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

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

edited Jun 22 '21 at 22:23

answered Apr 10 '19 at 19:04

Tieson T.

20,774
6
77
92

Bootstrap 5 is not necessary - it requires Bootstrap 4.1.0 according to the link. – anotherfred Feb 10 '21 at 14:39
1

@anotherfred Read the answer a bit more carefully - I specifically said Bootbox, not Bootstrap. – Tieson T. Feb 10 '21 at 22:13

score 16 · Answer 2 · answered May 12 '17 at 15:02

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/

score 13 · Answer 3 · edited Dec 30 '16 at 18:57

13

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.

edited Dec 30 '16 at 18:57

Haris ur Rehman

2,593
30
41

answered Jun 27 '16 at 08:23

M B Parvez

808
6
16

Thanks for your answer. Voted up. – Roxx Jun 27 '16 at 08:40
Works well but for me var b was returning zero, I changed to: var b = $(this).height(); // $(".modal-dialog").height(); – LMK Feb 27 '17 at 21:28

score 3 · Answer 4 · edited Apr 05 '19 at 12:50

3

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.

edited Apr 05 '19 at 12:50

Richy5

3
1

answered Nov 27 '18 at 14:49

anste

118
1
3
11

bootstrap and bootbox: set dialog box center of the screen

4 Answers4