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

Question

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

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

Answer 1

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

Answer 2

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

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

.modal {

    overflow-y: auto;
}

после (после редактирования):

.modal {

    overflow-y: scroll;
}

Answer 3

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

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

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

Фактическое решение

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

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

UPDATE

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

Answer 4

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

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

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

Answer 5

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

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

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;
    });
}

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

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

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

Answer 6

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

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

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

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

Answer 7

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

.modal {
  height: 60%;

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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

Я пытался сделать минимальныйпереопределяет Bootstrap 3.2.0 и предлагает следующее:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

Для сравнения я включил связанные стили 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