Подтверждение перед закрытием

Модальные окна или всплывающие окна (lightbox) часто используются в веб-разработке для отображения изображений, видео или другой информации без перенаправления пользователя на другую страницу. Одной из проблем, с которыми сталкиваются пользователи при работе с такими окнами, является случайное закрытие окна без желания покинуть текущий контент. В подобных ситуациях полезно добавить функциональность, которая будет запрашивать подтверждение перед закрытием окна. Это повышает удобство использования и предотвращает потерю данных.

Основные концепции BasicLightbox

Библиотека BasicLightbox — это минималистичное решение для создания модальных окон. Она предоставляет удобные методы для создания и управления окнами. По умолчанию BasicLightbox не включает в себя функции для добавления подтверждения перед закрытием окна, однако её возможности позволяют добавить этот функционал с помощью небольшого количества кода.

Реализация подтверждения закрытия

Для добавления подтверждения перед закрытием окна можно воспользоваться методами библиотеки, комбинируя их с дополнительной логикой для обработки пользовательских действий. Ниже приведён пример того, как можно интегрировать запрос на подтверждение в BasicLightbox.

Пример реализации

import * as basicLightbox from 'basiclightbox';

let instance;

// Функция для открытия модального окна
function openLightbox() {
    instance = basicLightbox.create(`
        <div class="content">
            <p>Содержимое окна</p>
            <button class="close-button">Закрыть</button>
        </div>
    `);

    instance.show();

    // Добавляем обработчик события для закрытия окна
    const closeButton = document.querySelector('.close-button');
    closeButton.addEventListener('click', handleClose);
}

// Функция для закрытия окна с подтверждением
function handleClose() {
    if (confirm('Вы уверены, что хотите закрыть окно?')) {
        instance.close();
    }
}

// Пример вызова функции для открытия окна
document.querySelector('#openButton').addEventListener('click', openLightbox);

В этом примере создаётся простое модальное окно с кнопкой закрытия. При нажатии на кнопку “Закрыть” появляется стандартное диалоговое окно с запросом на подтверждение. Если пользователь подтверждает, окно закрывается.

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

  1. Создание окна: Сначала создаём экземпляр окна с помощью метода basicLightbox.create(). В его содержимом находится обычный HTML-код с кнопкой для закрытия.
  2. Обработка закрытия: При клике на кнопку Закрыть срабатывает функция handleClose, которая вызывает стандартное окно подтверждения с помощью confirm(). Если пользователь выбирает “OK”, то окно закрывается.
  3. Подключение событий: С помощью addEventListener подключаем обработчик к кнопке, который вызывает подтверждение перед закрытием.

Управление кнопками и кастомизация

Для более сложных сценариев можно использовать собственные стилизованные кнопки или элементы интерфейса вместо стандартного окна подтверждения. В этом случае можно использовать два дополнительных элемента: одну кнопку для подтверждения закрытия и другую для отмены.

Пример с кастомизированным подтверждением

function openCustomLightbox() {
    instance = basicLightbox.create(`
        <div class="content">
            <p>Содержимое окна</p>
            <button class="cancel-button">Отменить</button>
            <button class="confirm-button">Закрыть</button>
        </div>
    `);

    instance.show();

    // Обработчик кнопки "Отменить"
    document.querySelector('.cancel-button').addEventListener('click', () => {
        instance.close();
    });

    // Обработчик кнопки "Закрыть"
    document.querySelector('.confirm-button').addEventListener('click', () => {
        if (confirm('Вы уверены, что хотите закрыть окно?')) {
            instance.close();
        }
    });
}

document.querySelector('#openButton').addEventListener('click', openCustomLightbox);

В этом примере используются две кнопки: одна для отмены закрытия окна, а другая — для подтверждения. Однако, при нажатии на кнопку “Закрыть” всё равно появляется подтверждение с помощью confirm(). Это даёт больше контроля над интерфейсом и позволяет кастомизировать внешний вид и поведение окна.

Обработка других событий

Важным аспектом является правильная обработка событий, происходящих при попытке закрыть окно. В BasicLightbox существуют встроенные методы для закрытия окна, такие как instance.close(). Однако, можно добавить дополнительную логику, чтобы учесть различные сценарии.

Пример с отменой закрытия при клике вне окна

Иногда полезно предотвратить закрытие окна при клике вне его области. Для этого можно добавить обработку событий на click для всего документа, исключая само окно. В таком случае, при попытке закрыть окно вне области модального окна, будет вызываться подтверждение.

function openWithOutsideClickProtection() {
    instance = basicLightbox.create(`
        <div class="content">
            <p>Содержимое окна</p>
            <button class="close-button">Закрыть</button>
        </div>
    `);

    instance.show();

    // Добавляем обработчик клика по документу
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.basicLightbox') && !e.target.closest('.close-button')) {
            if (confirm('Вы уверены, что хотите закрыть окно?')) {
                instance.close();
            }
        }
    });

    // Обработчик клика на кнопку закрытия
    document.querySelector('.close-button').addEventListener('click', () => {
        if (confirm('Вы уверены, что хотите закрыть окно?')) {
            instance.close();
        }
    });
}

document.querySelector('#openButton').addEventListener('click', openWithOutsideClickProtection);

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

Заключение

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

Оглавление