bootstrap和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垂直居中的bootbox模式

.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

从Bootbox 5开始，您可以通过选项centerVertical实际启用它：

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

Answer 4

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

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

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