Как прокручивать страницу, когда модальный диалог длиннее экрана?

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

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

Возможно ли это без использования JavaScript для управления полосой прокрутки?

Вот CSS, который я применил к модальному окну и диалогу:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

просто используйте

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

он упорядочит ваше модальное окно, а затем даст ему вертикальную прокрутку

Вот что исправило для меня:

max-height: 100%;
overflow-y: auto;

РЕДАКТИРОВАТЬ : теперь я использую тот же метод, который в настоящее время используется в Twitter, где модальное окно действует как отдельная страница поверх текущего содержимого, а содержимое за модальным окном не перемещается при прокрутке.

По сути это так:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

С помощью этого CSS в модальном окне:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Чистая версия JS (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

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

+ Изменить position

position:fixed;
overflow: hidden;

к

position:absolute;
overflow:scroll;

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

Демонстрация модального окна (см. Комментарии в исходном коде HTML)

Все сделано только с помощью HTML и CSS - JS не требуется для отображения и изменения размера модального окна (но, конечно, он вам все равно нужен для отображения окна - в новой версии JS совсем не нужен).

Обновление (больше демонстраций):

• Модальное окно выровнено по верхнему краю

• Центрированное модальное окно

• Старая демонстрация, использующая Javascript

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

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

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

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>

Вот .. У меня отлично работает

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

простой способ сделать это, добавив этот CSS Итак, вы только что добавили это в CSS:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

и он работает!

position:fixedподразумевает, что модальное окно останется фиксированным относительно точки обзора. Я согласен с вашей оценкой, что это уместно в этом сценарии, помня об этом, почему вы не добавляете полосу прокрутки в само модальное окно?

Если это так, то правильные max-heightи overflowсвойства должны помочь.

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

Как только я это сделал, проблемы, с которыми я столкнулся при обращении position: absoluteк диалоговому окну, были решены, поскольку пользователь больше не мог прокручивать страницу вниз.

Панель прокрутки страницы окна кликабельна, когда открыто модальное окно

Этот мне подходит. Чистый CSS.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

Попробуй и дай мне знать

Я хотел добавить свой чистый CSS ответ на эту проблему модальных окон с динамической шириной и высотой. Следующий код также работает со следующими требованиями:

1. Поместите модальное окно в центр экрана
2. Если модальное окно выше, чем область просмотра, затемнение прокрутки (не модальное содержимое)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / МЕНЬШЕ:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

Таким образом, модальное окно всегда находится в области просмотра. Ширина и высота модального окна произвольны. Для простоты я удалил из него значок закрытия.