Як увімкнути прокрутку вмісту всередині модальної версії?

Я намагаюся вмістити багато тексту в модальне поле, створене за допомогою Twitter Bootstrap, але у мене проблема: вміст відмовляється прокручувати.

Я спробував додати overflow:scrollі overflow-y:scroll, але безрезультатно; це просто змушує його відображати смугу прокрутки, фактично не дозволяючи прокрутку.

У чому причина цього і що я можу зробити?

У Bootstrap.css змініть атрибут фону ( position) Modal з fixedнаabsolute

У Bootstrap 3 вам потрібно змінити cssклас.modal

до (за замовчуванням bootstrap):

.modal {

    overflow-y: auto;
}

після (після редагування):

.modal {

    overflow-y: scroll;
}

Ця відповідь насправді складається з двох частин, попередження про UX та фактичного рішення .

Попередження про UX

Якщо ваш модаль містить стільки, що його потрібно прокрутити, запитайте себе, чи варто взагалі використовувати модаль. Розмір модального завантажувального модуля за замовчуванням є досить хорошим обмеженням щодо того, скільки візуальної інформації має відповідати. Залежно від того, що ви робите, ви можете замість цього вибрати нову сторінку або майстра.

Фактичне рішення

Тут: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

Це рішення також дозволить вам змінити висоту .modalта .modal-bodyзайняти залишковий простір вертикальною смугою прокрутки, якщо це необхідно.

ОНОВЛЕННЯ

Зверніть увагу, що в Bootstrap 3 модаль був реконструйований для кращої обробки переповненого вмісту. Ви зможете прокручувати сам модал вгору-вниз, коли він протікає під вікном перегляду.

Встановіть висоту для, modal-bodyа не для всього модального, щоб отримати ідеальну прокрутку на модальному накладенні. Я працюю так:

.MyModal {
    height: 450px;
    overflow-y: auto;
}

Тут ви можете встановити висоту відповідно до ваших вимог.

Якщо я правильно згадую, установка overflow: hidden на тілі не спрацювала у всіх браузерах, які я тестував для модальної бібліотеки, яку я створив для мобільного сайту. Зокрема, у мене були проблеми із запобіганням прокрутці тіла на додаток до модальної прокрутки, навіть коли я ставлю overflow: hidden на тілі.

Для мого поточного сайту я закінчив робити щось подібне. В основному він просто зберігає вашу поточну позицію прокрутки на додаток до того, щоб встановити для "переповнення" значення "приховано" на тілі сторінки, а потім відновлює позицію прокрутки після закриття модального режиму. Там є умова, коли відкривається інший модальний завантажувальний файл, коли той уже активний. В іншому випадку решта коду повинна бути зрозумілою для себе. Зверніть увагу, що якщо переповнення: приховане на тілі не заважає прокручувати вікно для певного браузера, це принаймні встановлює початкове місце прокрутки після виходу.

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

Якщо вам це не подобається, іншим варіантом буде призначення max-height та overflow: auto для .modal-body приблизно так:

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

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

Ось як я це зробив суто з перевизначенням деяких класів CSS:

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

Сподіваюся, це допоможе вам.

При використанні модального Bootstrap із skrollr, модальний не стане прокручуваним.

Виправлено проблему із зупинкою розповсюдження події дотику.

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

детальніше про те, як додати подію прокрутки до елемента всередині # skrollr-body

Насправді для Bootstrap 3 вам також потрібно замінити клас .modal-open на тілі.

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }

У мене виникла ця проблема в Mobile Safari на моєму iPhone6

Bootstrap додає клас .modal-open до тіла, коли відкривається модаль.

Я спробував зробити мінімальні перевизначення Bootstrap 3.2.0 і придумав наступне:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

Для порівняння я включив пов'язані стилі Bootstrap нижче.

Вибраний витяг із bootstrap / less / modals.less (не включайте це у своє виправлення):

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

Використана мобільна версія Safari: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

У мене була та сама проблема, і я знайшов виправлення, як показано нижче:

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100% працює.

.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

це працює для мене

Після використання всіх цих згаданих рішень я все ще не міг прокручувати за допомогою прокрутки миші, кнопка вгору / вниз на клавіатурі працювала для прокрутки вмісту.

Тому я додав нижче виправлення css, щоб це працювало

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

Додані вказівник-події: авто; щоб зробити її прокручуваною мишею.

Мені вдалося подолати це, використовуючи метрику "vh" з max-height на елементі .modal-body. 70vh дивився приблизно для мого використання.

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

Bootstrap додасть або видалить css "modal-open"до<body> тегу, коли ми відкриваємо або закриваємо модаль. Отже, якщо ви відкриєте кілька модальних, а потім закриєте довільний, модально-відкритий css буде видалено з тегу body.

Але ефект прокрутки залежить від атрибута, "overflow-y: auto;"визначеного вmodal-open

Рішення 1 : Ви можете заявити, .modal{ overflow-y:auto}або .modal-open .modal{ overflow-y:auto}якщо ви використовуєте bootstrap нижче 3v (для верхніх версій це вже заявлено).

Bootstrap додає modal-openклас для bodyтого, щоб видалити смуги прокрутки у випадку, якщо відображається модальний, але не додає жодного класу, до htmlякого також можуть бути смуги прокрутки, в результаті смужка прокрутки htmlіноді також може бути видно, для її видалення потрібно встановити модальне шоу / приховати події і додати / видалити overflow:hidden на html. Ось як це зробити.

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

Рішення 2 : Оскільки модаль має функціональні клавіші, найкращий спосіб вирішити це - зафіксувати висоту монтажу або навіть краще зв'язати висоту модаля з висотою вікна перегляду, як це -

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

За допомогою цього методу вам також не доведеться обробляти bodyіhtml смуги прокрутки.

Примітка 1 : Підтримка браузера дляvh одиниць.

Примітка 2 : Як пропонується вище . Якщо ви перейдете .modal{position:fixed}на .modal{position:absolute}, але якщо сторінка має більшу висоту, ніж модальний, користувач може прокрутити занадто багато вгору, і модальний зникне з області перегляду, це погано для користувацького досвіду.