Кастомизация — продвинутые настройки

В этом разделе демонстрируются продвинутые возможности кастомизации XPopup: управление контейнером, прокруткой страницы, залипающей шапкой, адаптивным режимом и ограничением размеров.

prependTo — выбор контейнера #

По умолчанию XPopup вставляет разметку в <body>. Опция prependTo позволяет указать другой контейнер. Это полезно, если у вас есть модальный режим на整个 странице или особые требования к z-index.

↳ Контейнер для попапа

bodyScrollable — прокрутка страницы #

По умолчанию при открытии попапа прокрутка страницы блокируется. Опция bodyScrollable: true разрешает скроллить страницу при открытом попапе. Полезно для небольших уведомлений.

Попробуйте: откройте попап и попробуйте прокрутить страницу.

headerSticked — залипающая шапка #

Опция headerSticked: true заставляет шапку «прилипать» к верхней границе окна при прокрутке контента. Полезно для длинных попапов с важным заголовком.

Попробуйте: откройте попап и прокрутите контент вниз — шапка останется на месте.

responsive — адаптивный режим #

Опция responsive: true включает адаптивный режим для смартфонов (ширина экрана < 480px). В этом режиме окно занимает всю высоту экрана, убираются скругления, контент подстраивается под доступное пространство.

Попробуйте: откройте в инструментах разработчика режим эмуляции смартфона.

maxSize — ограничение размера #

Опция maxSize: 'screen' гарантирует, что окно никогда не будет больше размеров экрана (viewport'а). Это предотвращает появление ненужных отступов и двойного скролла.

Автоматически включается, если заданы maxHeight='100%' и maxWidth='100%'.

Комбинация настроек #

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

Сводная таблица опций кастомизации

Опция	Тип	По умолчанию	Описание
`prependTo`	string	`'body'`	CSS-селектор контейнера для вставки попапа
`bodyScrollable`	boolean	`false`	Разрешить прокрутку страницы при открытом попапе
`headerSticked`	boolean	`false`	Залипающая шапка при прокрутке контента
`responsive`	boolean	`false`	Адаптивный режим для экранов < 480px
`maxSize`	string\|null	`null`	Ограничение размера: `'screen'` или `null`