Как сделать чтобы модальное окно скролилось а страница нет

Добавил пользователь Алексей Ф.
Обновлено: 05.10.2024

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

Как это устроено

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

Эффект анимации этого компонента зависит от prefers-reduced-motion медиа-запроса. См. раздел с уменьшенным движением в нашей документации по специальным возможностям .

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

Примеры

Модальные компоненты

Ниже приведен статический модальный пример (то есть его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.

Modal title

Modal body text goes here.

Живая демонстрация

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

Modal title

Woohoo, you're reading this text in a modal!

Статический фон

Modal title

I will not close if you click outside me. Don't even try to press escape key.

Прокрутка длинного контента

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

Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Вы также можете создать прокручиваемое модальное окно, которое позволяет прокручивать модальное тело путем добавления .modal-dialog-scrollable в .modal-dialog .

Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Помогите пожалуйста отключить скролл страницы при открытии модального окна Colorbox.

Модальные окна открываются по ссылкам следующего вида:

Буду благодарна за пошаговые инструкции.

Лучший ответ

Итоговое решение задачи:

Как настроить вывод блока в попапе Colorbox смотрим тут.
Смотрим на полосу прокрутки, расстраиваемся!

sites / all / modules / colorbox / styles / plain / colorbox_style.css
sites / all / modules / colorbox / styles / plain / colorbox_style.js

context ). bind ( 'cbox_open' , function () + $( 'body' , context ). addClass ( 'colorbox' );
+ >);

При желании в этом же файле меняем стили colorbox по желанию.

Комментарии

У вас скроллится страница вместе с оверлеем или за оверлеем? Если первое, то на оверлей повесить position:fixed, а если второе, то при открытии модалки нужно добавлять класс к body (может быть, он уже добавляется сам) и на этот класс повесить overflow:hidden

Попап окно скролилось со страницей, спасибо за совет, зафиксировать попап на экране удалось с помощью:

Осталось для body указать overflow:hidden, но к сожалению никакой класс для body при открытии модалки не добавляется, как его добавлять самостоятельно (использую дочернюю тему Bootstrap)?

Итоговое решение задачи:

Как настроить вывод блока в попапе Colorbox смотрим тут.
Смотрим на полосу прокрутки, расстраиваемся!

sites / all / modules / colorbox / styles / plain / colorbox_style.css
sites / all / modules / colorbox / styles / plain / colorbox_style.js

context ). bind ( 'cbox_open' , function () + $( 'body' , context ). addClass ( 'colorbox' );
+ >);

При желании в этом же файле меняем стили colorbox по желанию.

Кстати приведенный метод скрывает полосы прокрутки также и для Colorbox Node

При открытии формы сайт немного уходит вбок, при закрытии всё восстанавливается. Как бороться, родные?

У тебя при вызове модального окна на тег вешается класс .fancybox-margin, который имеет margin-right: 15px.

Деньги отдай в фонд помощи жертв банхамера.

Вот это гадство из убери

Не поможет, там просто у body нужно убрать position: absolute;

Спасибо. А шапку не вылечить, потому что она fixed?

После инициализации fancybox добавить:

PS: В разных браузерах ширина скролла разная. Edge немного уже, хром и ишак - одинаковы, вроде, по 17px. Так что смекалочка подсказала, что правильнее будет вот так: width: calc(100vw - (100vw - 100%));

Сорян, ошибся. 100vw - 100% = 0. Так что прост для Edge задай другую ширину. Методом подбора (мой любимый метод).

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

Стили с комментариями для модальных окон

Пишем логику на JavaScript

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

Код с комментариями

Получаем следующий результат

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ex, modi. Eos modi eum debitis vero impedit delectus cumque rem velit laboriosam sunt beatae odit, a cupiditate quae sit voluptatum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, iure, corporis eum beatae ut deleniti aperiam placeat maxime, eveniet non error. Fugiat placeat sit voluptatibus cumque quis adipisci porro quod eligendi maxime nemo impedit omnis, deserunt, esse sequi quos ullam, eos voluptatem ipsa iure animi. Error soluta laborum excepturi fugiat ratione eum, provident omnis deleniti illum animi placeat ea esse sunt atque, exercitationem eveniet sed consectetur quia quod vitae nemo velit. Officiis, possimus quia fugit aut maiores ad dignissimos rerum mollitia vitae voluptates. Quae cum inventore voluptate voluptatem debitis harum dignissimos accusamus dolorem cumque atque quam, repudiandae nam, quasi, ipsam deserunt. Voluptatem doloribus repudiandae voluptatum asperiores, impedit culpa, excepturi maxime libero architecto repellat enim velit quasi, facere iusto magni fugiat, iste provident ducimus maiores. Quos dolorum, eveniet nihil blanditiis, sint placeat, velit dolor, iusto voluptatibus deleniti magni perspiciatis? Consequuntur nesciunt cupiditate, veritatis aliquam sed molestias maiores. Dolorem temporibus, deleniti ex ut quis asperiores, perspiciatis a, nemo placeat dicta possimus aperiam.

Итоги

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

Читайте также: