Twitter Bootstrap 3 Модальный с прокручиваемым телом

Я перехожу из Bootstrap 2 в Bootstrap 3. В старой версии я использовал модалы, у которых было длинное содержимое, и модалы автоматически прокручивались при достижении заданной максимальной высоты.

В Bootstrap 3 модальная версия просто расширяется, чтобы показать весь контент, и я должен использовать кнопку вниз страницы, чтобы на самом деле дойти до конца и увидеть кнопки в модальном нижнем колонтитуле. Я не могу использовать полосу прокрутки в крайнем правом углу окна браузера, потому что она покрыта фоном, и в любом случае не будет интуитивно прокручивать только содержимое в модальном поле.

Как я могу достичь модальности в бутстрапе 3, который автоматически вставляет полосу прокрутки для прокрутки содержимого при достижении максимальной высоты?

Я попытался установить максимальную высоту для модального класса, например:

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}

Но он работает не так, как ожидалось. Модальное окно достигает максимального размера, но оно просто сокращает его содержимое, а нижний колонтитул даже не отображается.

Спасибо за любую помощь.

Ответ 1

Просто добавьте:

.modal-content {
  height:250px;
  overflow:auto;
}

Конечно, высота может быть адаптирована к вашим личным потребностям.

Рабочий пример

Update:

На самом деле это довольно легко. Просто добавьте:

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

для вашего css.

Он использует vh и calc, которые также имеют хорошую поддержку браузера (IE9 +).

Это основано на ответе . Пожалуйста, прочтите там более подробную информацию, я не буду копировать его ответ.

Рабочий пример

Ответ 2

Если у вас динамический контент, это может быть болью. Я использовал это, чтобы убедиться, что он имеет правильную высоту, а затем прокручивается:

$('#modal').on('shown.bs.modal', function () {
  $('.modal-dialog').css('height', $('.modal-dialog').height() );
});

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});

Ответ 3

Кажется, вы описываете https://github.com/twbs/bootstrap/issues/14916 ( "Модифицированное оверлей над полосой прокрутки" ), которое будет исправлено в Bootstrap v3.3.1 by https://github.com/twbs/bootstrap/pull/14927 ( "Исправить модальный фон, накладывающийся на модальную полосу прокрутки" ).