1、在不知道模态框的准确高度的情况下,如何将模态框垂直定位在中心?
要在不声明高度的情况下将 Bootstrap 3 模态绝对居中,您首先需要通过将其添加到样式表来覆盖 Bootstrap CSS:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
这会将模态对话框的左上角定位在窗口的中心。
我们必须添加这个媒体查询,否则在小型设备上模态 margin-left 是错误的:
@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);
}
});
});
更新(2015 年 1 月 10 日):
加上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.是否可以让模态居中并在模态体中具有溢出:自动,但前提是模态超出屏幕高度?
这可以通过给 modal-body 一个 overflow-y:auto 和一个 max-height 来实现。这需要更多的工作才能使其正常工作。首先将其添加到您的样式表中:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
我们将再次使用 jQuery 来获取窗口高度并首先设置 modal-content 的最大高度。然后我们必须设置 modal-body 的最大高度,方法是用 modal-header 和 modal-footer 减去 modal-content:
$('.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
更新(2015 年 11 月 30 日):
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'));
}
});
(更新 30/11/2015 http://cdpn.io/mKfCc上面的编辑)