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

В Bootstrap.css измените атрибут фона (position) модального окна с fixed на absolute.

В Bootstrap 3 вам нужно изменить класс css .modal

до (начальная загрузка по умолчанию):

.modal {

    overflow-y: auto;
}

после (после того, как вы его отредактируете):

.modal {

    overflow-y: scroll;
}

Этот ответ на самом деле состоит из двух частей: предупреждение UX и фактическое решение.

Предупреждение о UX

Если ваше модальное окно содержит так много элементов, что его нужно прокручивать, спросите себя, следует ли вам вообще использовать модальное окно. Размер модального окна начальной загрузки по умолчанию является довольно хорошим ограничением того, сколько визуальной информации должно вместиться. В зависимости от того, что вы делаете, вы можете вместо этого выбрать новую страницу или мастер.

Реальное решение

Здесь: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

Это решение также позволит вам изменить высоту .modal и заставить .modal-body занимать оставшееся пространство с вертикальной полосой прокрутки, если это необходимо.

ОБНОВЛЕНИЕ

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

Установите высоту для modal-body, а не для всего модального окна, чтобы получить идеальную прокрутку на модальном наложении. У меня работает так:

.MyModal {
    height: 450px;
    overflow-y: auto;
}

Здесь вы можете установить высоту в соответствии с вашими требованиями.

Вот как я сделал это исключительно с CSS, переопределяющим некоторые классы:

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

Надеюсь, это поможет вам.

Если я правильно помню, настройка overflow:hidden для тела не работала во всех браузерах, которые я тестировал для модальной библиотеки, которую я создал для мобильного сайта. В частности, у меня были проблемы с предотвращением прокрутки тела в дополнение к модальной прокрутке, даже когда я помещал overflow:hidden в тело.

Для моего текущего сайта я сделал что-то вроде этого. В основном он просто сохраняет вашу текущую позицию прокрутки в дополнение к установке «переполнения» на «скрытый» в теле страницы, а затем восстанавливает позицию прокрутки после закрытия модального окна. Там есть условие, когда открывается другой модальный модуль начальной загрузки, в то время как один уже активен. В противном случае остальная часть кода должна быть понятной. Обратите внимание, что если overflow:hidden в теле не предотвращает прокрутку окна для данного браузера, это, по крайней мере, возвращает исходное местоположение прокрутки при выходе.

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

Если вам это не нравится, другой вариант — назначить max-height и overflow:auto для .modal-body следующим образом:

.modal-body {
  max-height:300px;
  overflow:auto;
}

В этом случае вы можете настроить max-height для разных размеров экрана и оставить overflow:auto для разных размеров экрана. Однако вам нужно убедиться, что модальный заголовок, нижний колонтитул и тело не превышают размер экрана, поэтому я бы включил эту часть в ваши расчеты.

При использовании модального окна Bootstrap со skrollr модальное окно станет недоступным для прокрутки.

Исправлена ​​проблема с остановкой распространения события касания.

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

подробнее на странице Добавить событие прокрутки к элементу внутри #skrollr-body

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

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }

У меня возникла эта проблема в Mobile Safari на моем iPhone6

Bootstrap добавляет класс .modal-open в тело при открытии модального окна.

Я попытался внести минимальные изменения в Bootstrap 3.2.0 и получил следующее:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

Для сравнения ниже я включил соответствующие стили Bootstrap.

Выбранный отрывок из bootstrap/less/modals.less (не включайте это в свое исправление):

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

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

Используемая мобильная версия Safari: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

У меня была такая же проблема, и я нашел исправление, как показано ниже:

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100% рабочий.

.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

это работает для меня

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

Итак, я добавил ниже исправления css, чтобы он работал.

.modal-open {
    overflow: hidden;
}

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

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

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

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

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

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

В Bootstrap 5 сделайте это с классами: измените

<div class="modal-dialog">

to

<div class="modal-dialog modal-dialog-scrollable">

Также рассмотрите возможность добавления класса modal-dialog-centered .

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

Bootstrap добавляет класс modal-open к 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}, но в случае, если страница имеет большую высоту, чем модальное окно, пользователь может прокручивать слишком много вверх, и модальное окно исчезнет из области просмотра, это не очень хорошо для пользователя.