Кнопка закрытия — режимы позиционирования
XPopup предоставляет гибкую систему позиционирования кнопки закрытия.
Четыре режима (inside, outside, screen, none)
и автоматический выбор (auto) покрывают все сценарии использования.
Режимы кнопки закрытия
| Режим | Позиция | Когда использовать |
|---|---|---|
inside |
Внутри контейнера, в правом верхнем углу | Окна с шапкой (header) |
outside |
Рядом с верхним правым углом контейнера (адаптивно) | Маленькие окна без шапки (формы, подтверждения) |
screen |
Фиксированно в правом верхнем углу экрана | Полноэкранные окна, просмотр изображений |
none |
Скрыта | Модальные окна с собственными кнопками |
auto |
Автоматический выбор (по умолчанию) | Универсальный вариант |
auto:
- Есть header →
inside - Нет header, но sizeMode='screen' или type='image' →
screen - Нет header, маленькое окно →
outside
Демонстрация режимов
inside — внутри контейнера #
Кнопка находится в правом верхнем углу шапки. Стандартное поведение для окон с заголовком.
outside — адаптивная позиция #
Кнопка позиционируется рядом с верхним правым углом контейнера. Адаптивное поведение: если места сверху или справа недостаточно, кнопка перемещается внутрь контейнера и меняет цвет.
Попробуйте: откройте окно и измените размер браузера — кнопка автоматически перестроится.
Адаптивное поведение outside #
Алгоритм адаптивного позиционирования outside-кнопки определяет оптимальную позицию в зависимости от доступного пространства:
- Места хватает сверху и справа → кнопка снаружи (белая)
- Места нет справа → кнопка внутри по X, снаружи по Y
- Места нет сверху → кнопка снаружи по X, внутри по Y
- Места нет ни сверху, ни справа → кнопка внутри (цвет шапки)
screen — фиксированная в углу экрана #
Кнопка фиксирована в правом верхнем углу экрана. Идеально для полноэкранных окон и просмотра изображений.
screen для изображений (auto) #
Для изображений режим screen включается автоматически.
Кнопка отображается в углу экрана на полупрозрачном фоне.
none — без кнопки закрытия #
Кнопка закрытия скрыта. Пользователь должен закрыть окно другим способом (например, через кнопку в футере или по Escape).
Сводная таблица режимов
| Режим | Позиция | Цвет | z-index | Адаптивность |
|---|---|---|---|---|
inside |
absolute, внутри контейнера | Цвет текста шапки | 1046 | Нет |
outside |
absolute, относительно $box | Белый / цвет шапки | 1047 | Да (4 сценария) |
screen |
fixed, в углу экрана | Белый | 1051 | Нет |
none |
— | — | — | — |