bootstrap und bootbox: set Dialogfeld Mitte des Bildschirms

Question

Ich benutze bootbox.js von http://bootboxjs.com/examples.html und es ist ziemlich beeindruckend. Aber ich habe ein Problem beim Einrichten der Position des Dialogfelds.

Ich möchte Dialogfeld Mitte des Bildschirms platzieren. Ich verwende diesen Code, aber das Dialogfeld bleibt oben auf dem Bildschirm.

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

Bitte beraten Sie, wie Sie die Dialogbox in der Mitte des Bildschirms einstellen können.

Answer 1

Modal ist bereits in horizontaler Richtung zentriert. Wenn du vertikales zentriertes Modal willst, hoffe das dies für dich funktioniert

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

Geben Sie diese Antwort entsprechend Ihrem Beispiel.

Answer 2

Wenn Sie eine vertikale zentriert Bootbox modal wollen über css3

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

Sie mehr Flexibilität hier haben: https://www.kirupa.com/html5/centering_vertically_horizontally.htm https://css-tricks.com/snippets/css/a-guide-to-flexbox/