it-swarm.com.ru

Twitter Bootstrap 3 Modal с прокручиваемым телом

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

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

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

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

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

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

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

21
Vero

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

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

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

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

Обновление:

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

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

к вашему css.

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

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

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

71
Sebsemillia

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

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

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

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

0
cvrebert