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

请告知如何将对话框置于屏幕中央。

- Roxx

---

以上示例中是否还有其他CSS属性起作用了呢？ - M B Parvez

Answer 1

从Bootbox 5开始，你实际上可以通过一个选项 centerVertical 来启用这个功能：

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

- Tieson T.

---

Bootstrap 5不是必需的 - 根据链接，它需要Bootstrap 4.1.0。 - anotherfred

@anotherfred 请仔细阅读答案 - 我特别说了是 Bootbox，不是 Bootstrap。 - Tieson T.

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/

- Emanuele Pogliani

Answer 3

模态框已经在水平方向上居中。如果您想要垂直居中的模态框，希望这个方法适用于您。

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

根据您的示例给出这个答案。

- M B Parvez

---

谢谢你的回答。已点赞。 - Roxx

代码运行良好，但对我来说var b返回了零，我更改为：var b = $(this).height(); // $(".modal-dialog").height(); - LMK

Answer 4

这个问题很旧了，但另一个较短的选择是使用相应的Bootstrap类：

bootbox.alert('危险！') .find(".modal-dialog") .addClass("modal-dialog-centered");

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

- anste