.b-xpopup-data-container — настройки попапа из контента

.b-xpopup-data-container — это специальный CSS-класс, который позволяет содержимому попапа управлять его настройками. Data-атрибуты этого элемента автоматически применяются как опции попапа при загрузке контента.

Как это работает

При загрузке контента (AJAX, inline) XPopup ищет внутри него элемент с классом b-xpopup-data-container. Все data-xpopup-* атрибуты этого элемента преобразуются в опции попапа и применяются к текущему окну.

Приоритет опций (от низшего к высшему):

Глобальные настройки ($.xpopup.defaults)
Настройки плагина типа контента
Автоопределённые настройки
Опции, переданные в $.xpopup.open()
Data-атрибуты триггера
AJAX-ответ (JSON)
.b-xpopup-data-container в контенте ← наивысший приоритет

Важно: .b-xpopup-data-container имеет наивысший приоритет! Это позволяет серверу полностью контролировать отображение попапа.

Базовый синтаксис

Живые примеры

Скин и заголовок из контента #

Контент содержит .b-xpopup-data-container с настройками data-xpopup-skin="vk" и data-xpopup-header-caption. При загрузке скин изменится на VK, а заголовок возьмётся из контента.

Модальное окно из inline-контента #

Inline-контент задаёт data-xpopup-modal="true" — окно становится модальным. Также заданы размеры и подвал с кнопками.

Действия в шапке из контента #

Контент задаёт data-xpopup-header-actions с JSON-массивом действий. Также используется data-xpopup-header-icon-class для иконки.

Анимации из контента #

Контент задаёт параметры анимации появления и исчезновения.

Переопределение настроек триггера #

Триггер задаёт скин vk, но контент переопределяет его на strong. Так как .b-xpopup-data-container имеет высший приоритет, результирующий скин будет strong.

Футер из контента #

Контент задаёт футер с кнопками, сгруппированными по позициям.

Все настройки сразу #

Пример контента, который задаёт максимальное количество настроек: скин, размеры, модальность, анимации, шапку, подвал, действия.

Доступные data-атрибуты

Любая опция XPopup может быть передана через data-xpopup-* атрибут. Название опции преобразуется из camelCase в kebab-case с префиксом data-xpopup-.

Опция (camelCase)	data-атрибут	Пример значения
`skin`	`data-xpopup-skin`	`"vk"`
`skinMod`	`data-xpopup-skin-mod`	`"no-border.header-center"`
`headerCaption`	`data-xpopup-header-caption`	`"Заголовок"`
`headerSubcaption`	`data-xpopup-header-subcaption`	`"Подзаголовок"`
`headerHide`	`data-xpopup-header-hide`	`"true"`
`headerSticked`	`data-xpopup-header-sticked`	`"true"`
`headerIconClass`	`data-xpopup-header-icon-class`	`"fas fa-cog"`
`headerActions`	`data-xpopup-header-actions`	`'[{"url":"...","title":"..."}]'`
`modal`	`data-xpopup-modal`	`"true"`
`closeBtnType`	`data-xpopup-close-btn-type`	`"inside"`
`width`	`data-xpopup-width`	`"600"`
`height`	`data-xpopup-height`	`"400"`
`sizeMode`	`data-xpopup-size-mode`	`"screen"`
`boxAnimation`	`data-xpopup-box-animation`	`"true"`
`boxAnimationOpen`	`data-xpopup-box-animation-open`	`"slide-down"`
`boxAnimationClose`	`data-xpopup-box-animation-close`	`"fade-out"`
`bgAnimation`	`data-xpopup-bg-animation`	`"true"`
`footerActions`	`data-xpopup-footer-actions`	`'[{"xtype":"close",...}]'`
`changeUrl`	`data-xpopup-change-url`	`"true"`