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

В Bootstrap.css измените атрибут фона (position) Modal от 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 взять оставшееся пространство с помощью вертикальной полосы прокрутки.

UPDATE

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

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

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

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

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

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

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 to.modal-body следующим образом:

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

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

При использовании Bootstrap modal с skrollr модальность станет не прокручиваемой.

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

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

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

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

.modal {
  height: 60%;

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

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

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

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

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

$('.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% работает.

У меня проблема с 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;
}

Используемая версия Mobile 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

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

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

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

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

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

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

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

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

.modal-open {
    overflow: hidden;
}

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

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

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