Twitter bootstrap прокручиваемый модальный

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

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

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

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

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

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

благодаря

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

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

Детали:

1. удалить overflow-y: auto;или overflow: auto;из класса .modal (важно)
2. удалить max-height: 400px;из .modalкласса (важно)
3. Добавить max-height: 400px;в .modal .modal-body (или что-то еще, может быть 420pxили меньше, но не больше 450px)
4. Добавить 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 (браузеры, которые мне приходилось раздавать)

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

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

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

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

Чтобы решить эту проблему, нужно временно удалить переполнение из тега body и установить для модального 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);
});

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

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

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

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

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

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

Ничего из этого не будет работать должным образом. Правильный способ - изменить position: fixed на position: absolute для класса .modal