Как включить прокрутку контента внутри модала? - PullRequest
Новая
       17

Как включить прокрутку контента внутри модала?

72 голосов
/ 22 сентября 2011

Я пытаюсь поместить большой объем текста в модальное поле, созданное с помощью Twitter Bootstrap, но у меня проблема: этот контент отказывается прокручиваться.1004 *, но безрезультатно;это просто заставляет его отображать полосу прокрутки без фактического включения прокрутки.

В чем причина и что я могу сделать?

Ответы [ 15 ]

1 голос
/ 17 октября 2013

На самом деле для Bootstrap 3 вам также необходимо переопределить класс .modal-open для тела. 

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }
0 голосов
/ 25 октября 2016

Мне удалось преодолеть это с помощью метрики "vh" с max-height для элемента .modal-body.70vh выглядел как раз для моих нужд. 

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
0 голосов
/ 25 сентября 2016

Bootstrap добавит или удалит CSS "modal-open" к тегу <body>, когда мы открываем или закрываем модальное окно.Таким образом, если вы откроете несколько модальных, а затем закроете произвольный, открытый из модальных css будет удален из тега body.

Но эффект прокрутки зависит от атрибута "overflow-y: auto;", определенного в modal-open

0 голосов
/ 14 июля 2016

После использования всех этих упомянутых решений, я все еще не мог прокручивать, используя прокрутку мыши, кнопки прокрутки вверх / вниз работали для прокрутки контента.

Поэтому я добавил ниже css исправления, чтобы заставить его работать 

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

Добавлено события указателя: авто; , чтобы сделать его прокручиваемым с помощью мыши.

0 голосов
/ 19 марта 2015

Решение 1 : Вы можете объявить .modal{ overflow-y:auto} или .modal-open .modal{ overflow-y:auto}, если вы используете загрузочную версию ниже 3 В (для более высоких версий она уже объявлена).

Bootstrap добавляет modal-open class до body для удаления полос прокрутки в случае, если отображается модальный, но не добавляет к html какой-либо класс, который также может иметь полосы прокрутки, в результате полоса прокрутки html иногда может быть также видимой, чтобы удалитьэто вы должны установить модальные показать / скрыть события и добавить / удалить overflow:hidden на html.Вот как это сделать. 

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

Решение 2 : Поскольку модальные клавиши имеют функциональные клавиши, лучший способ справиться с этим - зафиксировать высоту или даже лучше соединить высотумодальной с высотой окна просмотра, как это - 

.modal-body {
     overflow:auto; 
     max-height: 65vh;
}

При этом методе вам также не нужно обрабатывать полосы прокрутки body и html.

Примечание 1 : Браузер поддерживает для vh единиц.

Примечание 2 : Как предлагается выше .Если вы измените .modal{position:fixed} на .modal{position:absolute}, но если страница будет иметь высоту, превышающую модальную, пользователь сможет прокрутить слишком много вверх, и модальная область исчезнет из области просмотра, это не очень удобно для пользователя.

Страница:
...