twitter-bootstrap Twitter Bootstrap - 中心模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18691071/
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
Twitter Bootstrap - Center Modal Dialog
提问by Anonymous1
I'm trying to center a waiting screen modal dialog in the middle of the screen. Here is the modal dialog I'm trying to alter: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap. How do I center it horizontally and vertically?
我试图在屏幕中间居中等待屏幕模式对话框。这是我试图改变的模式对话框：http: //dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap。如何水平和垂直居中？
回答by crazymatt
This is just matter of applying some CSS to the pleaseWaitDialogID. You have to set position:absoluteand the margin-topand margin-leftneed to be half of the height and width. So your CSS should look something like this:
这只是将一些 CSS 应用到pleaseWaitDialogID 的问题。你必须设置position:absolute，margin-top并且margin-left需要是高度和宽度的一半。所以你的 CSS 应该是这样的：
#pleaseWaitDialog {
width: 400px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -200px;
padding: 20px;
}
You will need to play with the numbers in order to achieve the box size that fits what you want but that should get you started.
您将需要使用数字来获得适合您想要的盒子大小，但这应该会让您开始。
回答by Sergey Barskiy
Here is another suggestion, that does not involve hard-coding of margins. it is using Angular, but you can replace element with $. It animates the margin, simulating 'fade" class in bootstrap.
这是另一个建议，它不涉及边距的硬编码。它使用的是 Angular，但您可以用 $ 替换元素。它为边距设置动画，模拟引导程序中的“淡入淡出”类。
var resize = function () {
var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
dialog.css('margin-top', (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')));
};
var animate = function () {
var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
dialog.animate({ 'margin-top': (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')) }, 'slow');
pleaseWaitDiv.off('shown.bs.modal', animate);
};
this.showPleaseWait = function () {
angular.element($window).on('resize', resize);
pleaseWaitDiv.on('shown.bs.modal', animate);
pleaseWaitDiv.modal();
};
this.hidePleaseWait = function () {
pleaseWaitDiv.modal('hide');
angular.element($window).off('resize', resize);
};
回答by alex89x
I know it's a little late, but I found the solution to all the problems with centering the Bootstrap Modal with different heights than the standard's (one).
我知道这有点晚了，但我找到了解决所有问题的解决方案，即以与标准（一个）不同的高度居中 Bootstrap Modal。
$("#yourModal").modal('show').css({
'margin-top': function () { //vertical centering
return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
return -($(this).width() / 2);
}
});
回答by Micah Winkelspecht
For standard jQuery/Coffeescript I used:
对于我使用的标准 jQuery/Coffeescript：
modal = $('.modal')
modal.css 'margin-top', ($(window).height() - modal.height()) / 2 - parseInt(modal.css('padding-top'))
All credit goes to Sergey Barskiy.
所有功劳都归功于谢尔盖·巴尔斯基。
回答by Alexander Levakov
I have met such problem trying to show image (with arbitrary size) in Angular's UI Bootstrap modal. So
我在尝试在 Angular 的 UI Bootstrap 模式中显示图像（任意大小）时遇到了这样的问题。所以
I have appended additional class name "width-auto" to a dialog div "modal". (In my case it was done with help of "windowClass" parameter)
I have wrote SCSS code:
.width-auto { &.modal { text-align: center; } .modal-dialog, .modal-content { display: inline-block; width: auto; max-width: 99vw; overflow: hidden; } }
我已将附加类名“width-auto”附加到对话框 div“modal”。（在我的情况下，它是在“windowClass”参数的帮助下完成的）
我已经写了 SCSS 代码：
.width-auto { &.modal { 文本对齐：居中；} .modal-dialog, .modal-content { display: inline-block; 宽度：自动；最大宽度：99vw；溢出：隐藏；} }
and it solved the problem.
它解决了这个问题。
