twitter-bootstrap bootstrap 和 bootbox：设置对话框的屏幕中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38045320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap and bootbox: set dialog box center of the screen
提问by Ironic
I am using bootbox.js from http://bootboxjs.com/examples.htmland it is quite impressive. But I have an issue while setting up the location of the dialog box.
我正在使用来自http://bootboxjs.com/examples.html 的bootbox.js ，它令人印象深刻。但是我在设置对话框的位置时遇到了问题。
I want to place dialog box center of the screen. I am using this code but dialog box stays on top of the screen.
我想把对话框放在屏幕的中心。我正在使用此代码，但对话框停留在屏幕顶部。
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'
});
Please advise how can set the dialog box center of the screen.
请指教如何设置对话框的屏幕中心。
回答by Emanuele Pogliani
If you want a vertical centered bootbox modal via css3
如果您想要通过 css3 垂直居中的引导框模式
.modal-open .modal {
display: flex !important;
align-items: center;
justify-content: center;
}
You can have more flexibility here: https://www.kirupa.com/html5/centering_vertically_horizontally.htmhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/
您可以在此处获得更多灵活性：https: //www.kirupa.com/html5/centering_vertically_horizontally.htm https://css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by WebDevRon
Modal is already centered in horizontal direction. If you want vertical centered modal, hope this will work for you
模态已经在水平方向居中。如果您想要垂直居中的模态，希望这对您有用
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";
}
});
Giving this answer according to your example.
根据你的例子给出这个答案。
回答by Tieson T.
As of Bootbox 5, you can actually enable this via an option, centerVertical:
从 Bootbox 5 开始，您实际上可以通过一个选项centerVertical启用它：
bootbox.alert({
message: "I'm a vertically-centered dialog!",
centerVertical: true
});
回答by anste
This question is quite old, but another short option would be to use the corresponding bootstrap class:
这个问题已经很老了，但另一个简短的选择是使用相应的引导程序类：
bootbox.alert('Danger!!')
.find(".modal-dialog")
.addClass("modal-dialog-centered");
bootbox.alert('Danger!!')
.find(".modal-dialog")
.addClass("modal-dialog-centered");
This works with Bootstrap v4.0.0or higher.
这适用于 Bootstrap v4.0.0或更高版本。
