Продвинутый

Я использую twitter bootstrap для проекта, над которым я работаю.

У меня есть модальное окно с несколько более длинной формой, и мне это не понравилось, когда окно стало слишком маленьким, модальное не прокручивало (если просто исчезло с моей страницы, которая не прокручивается).

Чтобы исправить это, я использовал следующий css

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

Это работает именно так, как я хочу, в Chrome (т.е. форма имеет полный размер, когда окно достаточно велико, но по мере того, как окно сжимается, модальные сжимаются и становятся прокручиваемыми). Проблема в том, что в IE модальная версия отключена. У кого-нибудь есть лучшее решение этой проблемы?

Мой пример можно найти на tinyhousemap.com(нажмите "Добавить запись на карту" в окне навигации для отображения модального текста)

Спасибо

ОТВЕТЫ

Ответ 1

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

.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

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

Ответ 2

Я сделал небольшое решение, используя только 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>

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

Ответ 3

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

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

Источник

Ответ 4

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

 .modal {
position: fixed;

С

.modal {
position: absolute;

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

Ответ 5

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

.modal { position: absolute; }

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

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

В случае использования .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);
});