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

Question

Я перехожу от 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%; 
} 

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

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

Answer 1

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

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

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

Working Example

Update:

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

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

к вашим css.

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

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

Working Example

Answer 2

Вы, кажется, описывая https://github.com/twbs/bootstrap/issues/14916 («модальный оверлей выше скроллинга„), который будет зафиксирован в Bootstrap v3.3.1 по https://github.com/twbs/bootstrap/pull/14927 (“Фиксу модального фона накладывание скроллбара модального в»).

Answer 3

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

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

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