1. Как вы можете расположить модально вертикально в центре, если вы не знаете точную высоту модала?
Для абсолютного центрирования Bootstrap 3 Modal без объявления высоты, вам сначала нужно перезаписать Bootstrap CSS, добавив это в свою таблицу стилей:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
Это поместит модальный диалог в верхнем левом углу в центре окна.
Мы должны добавить этот медиа-запрос, иначе модальное поле 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);
}
});
});
Обновление (01.10.2015):
Добавление на ответ Финика . Кредиты на Центрирование в Неизвестном .
.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-header и modal-footer:
$('.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'));
}
});
(Обновлено 30/11/2015 http://cdpn.io/mKfCc с вышеуказанным редактированием)