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

Question 1

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

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

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

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

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

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

благодаря

Question 2

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

.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

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

Question 3

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

У меня отлично работает, к тому же отзывчивый! :)

Question 4

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

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

Источник

Question 5

Попробуйте переопределить бутстрап:

 .modal {
position: fixed;

С участием:

.modal {
position: absolute;

У меня это сработало.

Question 6

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

.modal { position: absolute; }

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

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

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

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

Question 7

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

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

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

Question 8

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

Question 9

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

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

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

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

Question 10

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

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

Question 11

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

Answer 1

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

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

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

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

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

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

благодаря

Answer 2

Я нашел и использую это решение. Это очень удобно, поскольку позволяет прокручивать только модальное окно начальной загрузки, а не фоновое содержимое. github.com/aroc/Bootstrap-Scroll-Modal

Ричард Адлета

Answer 3

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

.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

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

Answer 4

5

Я дошел до этого самостоятельно, но очень хотел, чтобы он был настолько высоким, насколько позволяет окно, а не с наименьшим общим знаменателем. Но указание max-height: 80%;не работает, вместо прокрутки разворачивается. Должен ли я использовать события изменения размера для настройки $(".modal")[0].style.maxHeight?

Питер Вон

Answer 5

18

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

У меня отлично работает, к тому же отзывчивый! :)

Масса
источник

1

Отличное решение, но я бы сменил высоту на max-height

Олег

1

Кроме того, вы можете использовать $ ('. Modal'). On ('show.bs.modal', function (e) {}); для запуска функции определения размера. Это будет вычислять высоту только по мере необходимости, а не при каждом изменении размера и загрузке. Вам просто нужно проверить в функции события, использует ли текущий модальный код настраиваемую высоту прокрутки, прежде чем вычислять / применять css. т.е. var scrollModal = $ ('. modal-body.modal-scroll', это); if (scrollModal.length) ...

Роберт Уодделл

это для бутстрапа 2 или 3?

spy

Answer 6

1

Отличное решение, но я бы сменил высоту на max-height

Олег

Answer 7

1

Кроме того, вы можете использовать $ ('. Modal'). On ('show.bs.modal', function (e) {}); для запуска функции определения размера. Это будет вычислять высоту только по мере необходимости, а не при каждом изменении размера и загрузке. Вам просто нужно проверить в функции события, использует ли текущий модальный код настраиваемую высоту прокрутки, прежде чем вычислять / применять css. т.е. var scrollModal = $ ('. modal-body.modal-scroll', это); if (scrollModal.length) ...

Роберт Уодделл

Answer 8

это для бутстрапа 2 или 3?

spy

Answer 9

17

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

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

Источник

Гийом Рено
источник

это бутстрап 2 или 3? вопрос, скорее всего, был опубликован для bootstrap 2

spy

@spy, это для бутстрапа 3

Гийом

Answer 10

это бутстрап 2 или 3? вопрос, скорее всего, был опубликован для bootstrap 2

spy

Answer 11

@spy, это для бутстрапа 3

Гийом

Answer 12

8

Попробуйте переопределить бутстрап:

 .modal {
position: fixed;

С участием:

.modal {
position: absolute;

У меня это сработало.

Дэн Бейкер
источник

1

Это вызывает проблемы с выравниванием на IPad

Олег

Answer 13

1

Это вызывает проблемы с выравниванием на IPad

Олег

Answer 14

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

.modal { position: absolute; }

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

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

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

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

Answer 15

1

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

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

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

Андрес Ильич
источник

Удаление верхнего края улучшило модальное окно, так что оно не так далеко от экрана в IE, но теперь оно только центрируется (по вертикали) на экране при определенном размере окна. Для всех остальных размеров модальное окно выходит за верхнюю или нижнюю часть экрана.

Dan dot net

1

@Dandotnet модальное окно автоматически позиционируется на 50% от верха окна, вы можете перезаписать его на что-то меньшее, например 10%, но если вы добавите отрицательное значение, оно просто исчезнет с экрана, как это происходит в IE. Кстати, то же самое и в firefox.

Андрес Ильич

Answer 16

Удаление верхнего края улучшило модальное окно, так что оно не так далеко от экрана в IE, но теперь оно только центрируется (по вертикали) на экране при определенном размере окна. Для всех остальных размеров модальное окно выходит за верхнюю или нижнюю часть экрана.

Dan dot net

Answer 17

1

@Dandotnet модальное окно автоматически позиционируется на 50% от верха окна, вы можете перезаписать его на что-то меньшее, например 10%, но если вы добавите отрицательное значение, оно просто исчезнет с экрана, как это происходит в IE. Кстати, то же самое и в firefox.

Андрес Ильич

Answer 18

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

Answer 19

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

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

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

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

Answer 20

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

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

Answer 21

0

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

GravyPlaya
источник

2

на чем вы основываете свой вывод?

Рафаэль Херсковичи

Answer 22

2

на чем вы основываете свой вывод?

Рафаэль Херсковичи

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

Ответы:

Пример: