web-dev-qa-db-ja.com

bootstrap and bootbox：ダイアログボックスを画面の中央に設定

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

画面中央のダイアログボックスの設定方法を教えてください。

twitter-bootstrapbootbox
9
Ironic

モーダルはすでに水平方向の中心にあります。垂直中心のモーダルが必要な場合は、これがうまくいくことを願っています

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

あなたの例に従ってこの答えを与える。

9
WebDevRon

Css3を介して垂直方向に中央揃えのブートボックスモーダルが必要な場合

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

ここでより柔軟性を持たせることができます： https://www.kirupa.com/html5/centering_vertically_horizo​​ntally.htmhttps://css-tricks.com/snippets/css/a-guide -to-flexbox /

11
Emanuele Pogliani

Bootbox 5以降、オプションを使用してこれを実際に有効にできます centerVertical ：

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

この質問はかなり古いですが、別の短いオプションは、対応するbootstrapクラスを使用することです：

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

これはBootstrap v4.0.以上で動作します。

1
anste