⚙️

📦 Типы контента
🎨 Интерфейс
⚙️ Поведение
🚀 Дополнительно
🔌 API и события

Адаптивный режим (Responsive)

XPopup поддерживает адаптивный режим для мобильных устройств. При ширине экрана меньше 480px окно автоматически подстраивается: занимает всю высоту, убирает скругления и оптимизирует отображение контента.

Как работает адаптивный режим

Адаптивный режим включается опцией responsive: true. При ширине экрана < 480px происходят следующие изменения:

  • Окно занимает всю высоту экрана (min-height: 100vh)
  • Убираются скругления углов
  • Контент растягивается на доступную высоту (за вычетом header и footer)
  • Добавляется класс b-xpopup_responsive к боксу
  • Убираются вертикальные отступы бокса
Совет: Откройте инструменты разработчика (F12), включите эмуляцию мобильного устройства (Ctrl+Shift+M) и выберите ширину экрана меньше 480px, чтобы увидеть адаптивное поведение в действии.

Сравнение: с адаптивным режимом и без

С адаптивным режимом и без #

Два одинаковых окна с длинным контентом. Первое — с responsive: true, второе — без. На мобильном экране разница очевидна.

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

Форма с адаптивным режимом #

Форма входа с адаптивным режимом. На мобильном устройстве форма занимает весь экран, что удобно для заполнения полей.

Длинный контент + залипающая шапка #

Комбинация адаптивного режима и залипающей шапки. На мобильном устройстве шапка остаётся видимой при прокрутке длинного контента.

Модальное адаптивное окно #

Модальное окно с адаптивным режимом и кнопкой в футере. На мобильном устройстве занимает весь экран.

Изображения на мобильном #

Изображения по умолчанию используют sizeMode: 'screen', поэтому на мобильных устройствах они автоматически занимают весь экран. Свайпы и жесты листания работают как на десктопе, так и на тач-устройствах.

image 1 image 2

CSS-классы адаптивного режима

При включении адаптивного режима к боксу добавляется класс b-xpopup_responsive. Вы можете использовать его для дополнительной кастомизации стилей на мобильных устройствах.

CSS-класс Когда добавляется Что делает
.b-xpopup_responsive responsive: true + ширина < 480px Включает адаптивные стили

Рекомендации по использованию

  • Формы: всегда включайте responsive: true для форм на мобильных устройствах — это улучшает UX при заполнении полей.
  • Длинный контент: комбинируйте responsive: true с headerSticked: true для удобной навигации.
  • Модальные окна: добавляйте footerActions — на мобильных кнопки в футере всегда видны.
  • Изображения: используют sizeMode: 'screen' по умолчанию, дополнительных настроек не требуется.
  • Тестирование: проверяйте адаптивное поведение в эмуляторе устройств (Chrome DevTools).