这个问题分为两部分:
当你不知道模态的确切高度时，你如何将模态垂直地放置在中心? 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远远大于垂直屏幕尺寸时，这给了我所需要的结果，但对于较小的模式内容，这几乎是不可用的。
当前回答
从这里找到了完美的解决方案
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});
其他回答
这是响应式代码，也打开不同大小的移动视图，请检查一次。
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 20%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
还有另一种解决方案，它将为窗口上的每个可见模态设置有效的位置。调整大小事件和show.bs.modal:
(function ($) {
"use strict";
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog"),
offset = ($(window).height() - $dialog.height()) / 2,
bottomMargin = parseInt($dialog.css('marginBottom'), 10);
// Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
if(offset < bottomMargin) offset = bottomMargin;
$dialog.css("margin-top", offset);
}
$(document).on('show.bs.modal', '.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
})(jQuery);
1. 当你不知道模态的确切高度时，你如何将模态垂直地放置在中心?
为了在不声明高度的情况下绝对居中Bootstrap 3 Modal，你首先需要覆盖Bootstrap CSS，将其添加到你的样式表中:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
这将使模态对话框位于窗口中心的左上角。
我们必须添加这个媒体查询，否则在小型设备上模式左边距是错误的:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
现在我们需要用JavaScript调整它的位置。要做到这一点，我们给元素一个负的上距和左距，等于它的高和宽的一半。在这个例子中，我们将使用jQuery，因为它是可用的Bootstrap。
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
更新(01/10/2015):
加上Finik的答案。归功于在未知的中心。
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
注意到这个负边距了吧?这将删除由内联块添加的空间。这个空格会导致模式跳转到页面底部@media width < 768px。
2. 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
这可以通过给模态体一个overflow-y:auto和max-height来实现。这需要更多的工作才能使其正常工作。开始添加到你的样式表:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
我们将再次使用jQuery来获取窗口高度，并首先设置modal-content的max-height。然后我们必须设置模态体的最大高度，通过用模态标题和模态页脚减去模态内容:
$('.modal').on('shown.bs.modal', function() {
var contentHeight = $(window).height() - 60;
var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;
$(this).find('.modal-content').css({
'max-height': function () {
return contentHeight;
}
});
$(this).find('.modal-body').css({
'max-height': function () {
return (contentHeight - (headerHeight + footerHeight));
}
});
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
你可以在这里找到Bootstrap 3.0.3的工作演示:http://cdpn.io/GwvrJ 编辑:我建议使用更新版本，以获得响应更快的解决方案:http://cdpn.io/mKfCc
更新(30/11/2015):
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
(更新于2015年11月30日http://cdpn.io/mKfCc，有以上编辑)
扩展@Finik的精彩回答，这个修复只适用于非移动设备。我在IE8、Chrome和Firefox 22上进行了测试——它可以处理很长或很短的内容。
.modal {
text-align: center;
}
@media screen and (min-device-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
我的解决方案
.modal-dialog-center {
margin-top: 25%;
}
<div id="waitForm" class="modal">
<div class="modal-dialog modal-dialog-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="headerBlock" class="modal-title"></h4>
</div>
<div class="modal-body">
<span id="bodyBlock"></span>
<br/>
<p style="text-align: center">
<img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
</p>
</div>
</div>
</div>
</div>
