⚙️

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

XPOPUP — лёгкие всплывающие окна для любого контента

Изображения, видео, формы, AJAX, iframe — всё, что нужно, в удобном модальном окне

📚 Полная документация и примеры
На этом сайте вы найдёте подробное описание всех возможностей XPopup, живые примеры с кодом, API справочник и руководства по кастомизации. Используйте меню справа для навигации по разделам.

Особенности

🚀 Основные возможности

  • ⚡ Быстрый, лёгкий (~25 KB gzip), простой в использовании
  • 📦 Не требует внешних зависимостей (кроме jQuery)
  • 🔄 Поддержка всех типов контента: inline, iframe, image, ajax, gallery
  • 🎯 Автоопределение типа контента по URL

🎛️ Гибкая настройка

  • 🏷️ Полная конфигурация через data- атрибуты элемента-триггера
  • 📄 Управление через data- атрибуты внутри контента (.b-xpopup-data-container)
  • 🎨 16 готовых скинов (8 светлых + 8 тёмных): default, vk, ios, material3, ya, gos, strong, lite
  • 🔧 Модификаторы скинов: no-border, header-center, header-bold и другие
  • 🌍 Интернационализация (i18n): русский, английский, немецкий, французский
  • 🌙 Тёмный режим (Dark Mode): ручной, автоматический или по системным настройкам

✨ Внешний вид и анимации

  • 📐 Автоматический подбор оптимальных размеров и позиции окна
  • 🎭 CSS-анимации открытия/закрытия: fade, slide, zoom
  • 🎬 Раздельная анимация окна и фона
  • 📱 Адаптивный дизайн (responsive режим для мобильных устройств)
  • 🖼️ Настройка заголовка, иконки, подвала с кнопками

🖼️ Галерея и изображения

  • 🔢 Галерея со счётчиком, стрелками и свайпами
  • 📦 Предзагрузка соседних изображений (5 вперёд, 2 назад)
  • 💾 Кэширование загруженных изображений
  • ↔️ Навигация между окнами разных типов (Left-Right)

🔌 API и расширение

  • 💻 Полноценный API для программного управления ($.xpopup.open(), $.xpopup.close())
  • 📡 Система событий жизненного цикла (открытие, закрытие, загрузка контента)
  • 🔌 Плагинная архитектура для расширения функциональности
  • 🔄 Поддержка History API и уникальных URL для каждого окна
  • 📜 Навигация по стеку открытых окон, кнопка «Назад»

⚙️ Дополнительные возможности

  • ⏳ Два режима загрузчика: спиннер (на весь экран) и оверлей (внутри окна)
  • 🎭 Placeholder (skeleton screen) для имитации мгновенной загрузки
  • 🔒 Модальный режим (запрет закрытия по клику на фон)
  • ⌨️ Управление с клавиатуры (Escape для закрытия, стрелки для галереи)
  • 📥 Скачивание изображений и кнопка "Поделиться" (Web Share API)

🎬 Быстрые примеры

Нажмите на любой пример — окно откроется сразу

Текстовый контент со страницы
С затемнением фона и кнопкой закрытия
Контент подгружается с сервера
С полями ввода и кнопкой отправки
Встраивание видео через iframe
Несколько фото с навигацией
📖 Все примеры →

🚀 Быстрый старт

Попробуйте прямо сейчас — кликайте на кнопки внутри инструкций

📐 Настройка размера окна

Размеры задаются через опции width и height. Можно использовать пиксели, проценты или auto.

Подробнее →

🎭 Анимации открытия и закрытия

XPopup поддерживает плавные CSS-анимации: fade, slide, zoom. Анимации окна и фона настраиваются отдельно.

Подробнее →

🎨 Скины и тёмный режим

16 встроенных скинов (8 светлых + 8 тёмных). Тёмный режим можно включить вручную или доверить системным настройкам.

Все скины →

❌ Кнопка закрытия

Три режима позиционирования: внутри окна, снаружи (адаптивно) или зафиксированная на экране.

Подробнее →

🔙 Кнопка «Назад» и цепочки окон

Открывайте несколько окон в одном боксе и возвращайтесь назад с помощью кнопки в шапке.

Подробнее →

📖 Полная документация

🔧 Основные опции
🎯 API и события
📦 Примеры использования

📋 Основные опции XPopup

Опция По умолчанию Описание
type 'auto' Тип контента: inline, ajax, image, iframe
content — URL, CSS-селектор или HTML-строка
Внешний вид
skin 'default' Скин: default, vk, ios, material3, ya, gos, strong, lite + тёмные версии
skinMod '' Модификаторы через точку: no-border.header-center
width — Ширина: '800', '80%', '50em'
height — Высота: '600', '80%'
sizeMode 'auto' Режим размеров: auto, strict, screen
responsive false Адаптивный режим для смартфонов
Шапка и подвал
headerCaption null Заголовок окна
headerSubcaption null Подзаголовок
footerActions null Массив действий в подвале окна
Поведение
closeBtnType 'auto' Режим кнопки закрытия: auto, inside, outside, screen, none
closeOnBgClick true Закрывать по клику на фон
modal false Модальный режим (нельзя закрыть кликом на фон или Escape)
bodyScrollable false Разрешить скролл страницы при открытом окне
backBtn false Показывать кнопку «Назад»
Анимация
boxAnimation false Анимация открытия/закрытия окна
boxAnimationOpen 'zoom-in' Эффект открытия: fade-in, slide-down, zoom-in
boxAnimationClose 'zoom-out' Эффект закрытия: fade-out, slide-up, zoom-out
bgAnimation true Анимация фона (плавное затемнение)
bgBlur false Размытие фона
i18n и Dark Mode
lang 'ru' Язык интерфейса: ru, en, de, fr
darkMode false Тёмный режим: true, false, 'auto'

Любые опции можно передать через data-xpopup-* атрибуты на элементе-триггере или внутри контента через .b-xpopup-data-container.

👨‍💻 Авторы

📄 Лицензия

XPopup — открытое ПО под лицензией MIT.