Прокручуваний модальний спосіб завантаження Twitter

Я використовую завантажувальний твіттер для проекту, над яким я працюю.

У мене є модальне вікно, яке має дещо довшу форму, і мені це не сподобалось, коли вікно стало занадто маленьким, модаль не прокручувався (якщо просто зник з моєї сторінки, яку не можна прокручувати).

Щоб виправити це, я використав наступний 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;}створить додаткову смугу прокрутки праворуч на сторінці, коли тіло вже переповнене.

Для цього потрібно тимчасово видалити переповнення з тегу тіла та встановити для модального переповнення-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;
}

Нічого з цього не буде працювати належним чином. Правильним способом є зміна позиції: фіксована на позицію: абсолютна для класу .modal