css Bootstrap 3模态垂直居中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Bootstrap 3模态垂直居中相关的知识,希望对你有一定的参考价值。
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'));
}
});
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
以上是关于css Bootstrap 3模态垂直居中的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap弹出的模态框水平垂直居中的实现
BootStrap 模态框禁用空白处点击关闭,手动显示隐藏,垂直居中
css Bootstrap 3上的垂直居中类中心
如何使 ngx-bootstrap 模态居中
bootstrap中文字如何做到垂直居中呢?
垂直对齐 Bootstrap 3 列的内容