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

あなたの例に従ってこの回答を与えてください。あなたはCSS3

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

を介して垂直中心bootboxをモーダルにしたい場合は

Answer 2

あなたはここでより多くの柔軟性を持つことができます。 https://www.kirupa.com/html5/centering_vertically_horizontally.htm https://css-tricks.com/snippets/css/a-guide-to-flexbox/