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

如果你想通过css3垂直居中的bootbox模式

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

您可以在此处获得更多灵活性:https : //www.kirupa.com/html5/centering_vertically_horizo​​ntally.htm https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

模态已经在水平方向上居中.如果你想要垂直居中的模态,希望这对你有用

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 3

从Bootbox 5开始，您实际上可以通过选项centerVertical启用此功能：

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