События XPopup
XPopup предоставляет богатую систему событий, которые позволяют отслеживать жизненный цикл попапа: открытие, закрытие, загрузку контента, изменение статуса. На этой странице описаны все доступные события с живыми примерами.
Общая информация
Все события XPopup используют префикс xpopup_ и генерируются
на объекте document. Подписаться на событие можно через jQuery:
Большинство событий передают два аргумента в обработчик:
api— ссылка на объект$.xpopup(XpopupApi)data— объект с дополнительными данными события (опционально)
События жизненного цикла бокса (Box)
Эти события относятся к жизненному циклу всего бокса (совокупности окон в одном стеке).
| Событие | Момент | data |
|---|---|---|
xpopup_box_open_before |
Перед открытием бокса (до создания DOM-элементов) | — |
xpopup_box_open_after |
После открытия бокса (DOM создан, анимация завершена) | — |
xpopup_box_close_before |
Перед закрытием бокса | — |
xpopup_box_closing |
В процессе закрытия (анимация запущена) | — |
xpopup_box_close_after |
После завершения анимации закрытия | — |
xpopup_box_closed |
Бокс полностью закрыт и удалён из DOM | — |
xpopup_box_new_status |
Изменение статуса бокса (opening/opened/closing/closed) | { newStatus, oldStatus } |
xpopup_popup_closed |
Все боксы закрыты (полное завершение работы) | — |
События жизненного цикла окна (Window)
Эти события относятся к жизненному циклу отдельного окна внутри бокса.
| Событие | Момент | data |
|---|---|---|
xpopup_window_settings_alter |
Изменение настроек окна плагинами | — |
xpopup_window_change_before |
Перед изменением контента окна | — |
xpopup_window_change_after |
После изменения контента окна | — |
xpopup_window_new_status |
Изменение статуса окна (fetching/loading/updating/ready/error/closed) | { newStatus, oldStatus } |
xpopup_window_loading |
Начало загрузки контента окна | — |
xpopup_window_ready |
Контент окна загружен и отображён | — |
xpopup_window_dispose_before |
Перед уничтожением окна | — |
xpopup_window_dispose_after |
После уничтожения окна | — |
События AJAX
События, специфичные для загрузки контента через AJAX.
| Событие | Момент | data |
|---|---|---|
xpopup_window_ajax_request_before |
Перед отправкой AJAX-запроса | { url, data, ... } — объект настроек $.ajax |
xpopup_window_ajax_success |
После успешного получения AJAX-ответа | { response, xhr } |
Живые примеры
Отслеживание открытия и закрытия #
Подписка на xpopup_box_open_after и xpopup_box_closed.
Откройте попап — в консоли появится сообщение. Закройте — ещё одно.
Отслеживание статусов окна #
Подписка на xpopup_window_new_status.
Показывает все изменения статуса: fetching → loading → updating → ready.
Перехват AJAX-запроса #
Подписка на xpopup_window_ajax_request_before и
xpopup_window_ajax_success. Позволяет модифицировать
запрос перед отправкой и ответ перед отображением.
Полный жизненный цикл попапа #
Подписка на все ключевые события. Нажмите кнопку, чтобы увидеть полную последовательность событий при открытии и закрытии попапа.
Команды при событиях (eventsCommands) #
Опция eventsCommands позволяет назначить команды, которые выполнятся
при наступлении определённых событий (например, перезагрузка страницы после закрытия).
Внимание: для работы требуется XSyst. В данном примере показан формат передачи команд.
Сводная таблица всех событий
| Константа в API | Строковое имя события | Группа |
|---|---|---|
EVENT_BOX_NEW_STATUS |
xpopup_box_new_status |
Box |
EVENT_BOX_OPEN_BEFORE |
xpopup_box_open_before |
Box |
EVENT_BOX_OPEN_AFTER |
xpopup_box_open_after |
Box |
EVENT_BOX_CLOSE_BEFORE |
xpopup_box_close_before |
Box |
EVENT_BOX_CLOSING |
xpopup_box_closing |
Box |
EVENT_BOX_CLOSE_AFTER |
xpopup_box_close_after |
Box |
EVENT_BOX_CLOSED |
xpopup_box_closed |
Box |
EVENT_POPUP_CLOSED |
xpopup_popup_closed |
Box |
EVENT_WINDOW_SETTINGS_ALTER |
xpopup_window_settings_alter |
Window |
EVENT_WINDOW_CHANGE_BEFORE |
xpopup_window_change_before |
Window |
EVENT_WINDOW_NEW_STATUS |
xpopup_window_new_status |
Window |
EVENT_WINDOW_DISPOSE_BEFORE |
xpopup_window_dispose_before |
Window |
EVENT_WINDOW_DISPOSE_AFTER |
xpopup_window_dispose_after |
Window |
EVENT_WINDOW_CHANGE_AFTER |
xpopup_window_change_after |
Window |
EVENT_WINDOW_LOADING |
xpopup_window_loading |
Window |
EVENT_WINDOW_READY |
xpopup_window_ready |
Window |
EVENT_WINDOW_AJAX_SUCCESS |
xpopup_window_ajax_success |
AJAX |
EVENT_WINDOW_AJAX_REQUEST_BEFORE |
xpopup_window_ajax_request_before |
AJAX |