Твиттер с начальной загрузкой

Как насчет решения ниже? Это сработало для меня. Попробуйте следующее:

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

Подробнее:

• удалить overflow-y: auto; или overflow: auto; из класса .modal(важно)
• удалить max-height: 400px; из .modal класса (важно)
• Добавить max-height: 400px; в .modal.modal-body (или что бы то ни было, может быть 420px или меньше, но не больше 450px)
• Добавить overflow-y: auto; в .modal .modal-body

Готово, прокручивается только тело.

Я сделал небольшое решение, используя только jQuery.

Сначала вам нужно добавить дополнительный класс к <div class="modal-body">, который я назвал "ativa-scroll", поэтому он будет выглядеть примерно так:

<div class="modal-body ativa-scroll">

Итак, теперь просто поместите этот фрагмент кода на свою страницу, рядом с загрузкой JS:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

Я отлично работаю для меня, также отзывчивым способом!:)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Это работает для Bootstrap 3 без JS-кода и реагирует.

Источник

Попробуйте перезагрузить загрузочный файл:

 .modal {
position: fixed;

С

.modal {
position: absolute;

Это сработало для меня.

Я также добавил

.modal { position: absolute; }

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

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

$('.modal').css('top', $(document).scrollTop() + 50);

Кажется, что вы довольны FireFox, Chrome, IE10 8 и 7 (браузеры, которые мне пришлось сдать)

Мне удалось преодолеть это, используя метрику "vh" с max-height на элементе .modal-body. 70vh посмотрел на меня правильно. Затем установите overflow-y в auto, чтобы он прокручивался только при необходимости.

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

Проблема с решением @grenoult CSS (в основном это работает) заключается в том, что она полностью отзывчива и мобильна, когда клавиатура всплывает (т.е. когда они нажимают на вход в модальном диалоговом окне) размер экрана изменяется и модальный размер диалогового окна изменяется, и он может скрывать введенные им данные, поэтому они не могут видеть, что они набирают.

Лучшим решением для меня было использование jquery следующим образом:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

Он не реагирует на изменение размера окна, но этого не происходит в любом случае.

Ваш модал скрыт в firefox, и это связано с объявлением отрицательного поля, которое у вас есть в вашей общей таблице стилей:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Удалите отрицательный запас, и все работает отлично.

В случае использования .modal {overflow-y: auto;} будет создана дополнительная полоса прокрутки справа от страницы, когда тело уже переполнено.

Работа для этого заключается в том, чтобы временно удалить переполнение из тега body и установить autoal overflow-y в auto.

Пример:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

Ничто из этого не будет работать, как ожидалось. Правильный способ - изменить положение: зафиксировано в позиции: абсолютное для .modal class