bootstrap and bootbox: 设置对话框屏幕中心

Question

我正在使用 http://bootboxjs.com/examples.html 中的 bootbox.js，它令人印象深刻。但是我在设置对话框的位置时遇到了问题

我想将对话框放在屏幕中央。我正在使用此代码，但对话框停留在屏幕顶部。

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

请指教如何设置对话框的屏幕中心。

Answer 1

模态框已经水平居中。如果您想要垂直居中的模态，希望这对您有用

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

根据你的例子给出这个答案。

Answer 2

如果你想通过 css3

垂直居中的引导框模态

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

你可以在这里有更多的灵活性： https://www.kirupa.com/html5/centering_vertically_horizontally.htm https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

这个问题很老了，但是另一个简短的选择是使用相应的 bootstrap class:

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

这适用于 Bootstrap v4.0.0 或更高版本。

Answer 4

从 Bootbox 5 开始，您实际上可以通过一个选项启用它，centerVertical:

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

bootstrap and bootbox: 设置对话框屏幕中心

bootstrap and bootbox: set dialog box center of the screen

twitter-bootstrap

bootbox