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

Ответ 1

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

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

он устроит ваш модальный, а затем даст ему вертикальный свиток

Ответ 2

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

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

EDIT: теперь я использую тот же метод, который в настоящее время используется в 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/
Pure JS-версия (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

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

Ответ 3

Измените position

position:fixed;
overflow: hidden;

к

position:absolute;
overflow:scroll;

Ответ 4

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

Модальное демонстрационное окно (см. комментарии в исходном коде 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 */
        }

Ответ 5

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

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

Ответ 6

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

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


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

        </body>
</html>

Ответ 7

Окно страницы прокрутки экрана можно щелкнуть, когда модальная функция открыта

Этот работает для меня. Чистый CSS.

<style type="text/css">

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

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

</style>

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

Ответ 8

Здесь.. Отлично работает для меня

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

Ответ 9

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

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