Метод close

Featherlight — это минималистичная библиотека для создания модальных окон на JavaScript. Одним из ключевых методов, обеспечивающих контроль над поведением модальных окон, является метод close. Он отвечает за закрытие текущего экземпляра модального окна и корректное освобождение ресурсов, связанных с ним.

Основные возможности метода close

Метод close выполняет несколько важных функций одновременно:

  1. Закрытие модального окна. При вызове close окно исчезает с экрана, при этом используются CSS-анимации, если они настроены через опции openSpeed и closeSpeed.

  2. Очистка DOM. Контент модального окна может быть динамическим. close гарантирует удаление элементов, созданных библиотекой, чтобы не оставлять лишних узлов в DOM.

  3. Вызов колбэков. Метод инициирует цепочку событий, таких как beforeClose и afterClose. Это позволяет выполнять дополнительную логику до и после закрытия окна:

    • beforeClose вызывается перед фактическим скрытием окна и может быть использован для проверки условий закрытия.
    • afterClose вызывается после удаления окна из DOM и завершения всех анимаций.

Синтаксис метода

$.featherlight.current().close([event]);
  • $.featherlight.current() — возвращает текущий открытый экземпляр модального окна.
  • close([event]) — закрывает окно. Параметр event является необязательным и может передаваться, если закрытие инициировано событием, например кликом мыши или нажатием клавиши.

Пример использования:

// Закрытие текущего модального окна
$.featherlight.current().close();

Опции и особенности поведения

  1. Анимация закрытия Featherlight использует опцию closeSpeed для определения скорости анимации закрытия. Значение задается в миллисекундах или как строка 'fast' / 'slow'.

    $.featherlight.current().close();
// если closeSpeed = 300, анимация займет 300 мс

  2. Условное закрытие через beforeClose Метод beforeClose позволяет предотвратить закрытие, возвращая false:

    $.featherlight.current().beforeClose = function(event) {
    if (!confirm("Вы уверены, что хотите закрыть окно?")) {
        return false; // окно не закроется
    }
};

  3. События при закрытии

    • beforeClose — до начала закрытия.
    • afterClose — после полного удаления из DOM и завершения анимации.
    $.featherlight.current().afterClose = function() {
    console.log("Окно полностью закрыто");
};

Закрытие по различным триггерам

Метод close можно вызывать не только программно, но и через встроенные механизмы Featherlight:

  1. Кнопка закрытия Элемент с классом .featherlight-close автоматически вызывает close при клике.

  2. Клик вне окна (опция closeOnClick) Если включена опция closeOnClick: 'background', клик по затемнённой области вызывает close.

  3. Нажатие клавиши Escape (опция closeOnEsc) Если closeOnEsc: true, нажатие клавиши Escape закроет текущее окно.

Пример полного использования метода close

// Инициализация модального окна
$.featherlight('<p>Контент модального окна</p>', {
    closeSpeed: 400,
    beforeClose: function(event) {
        console.log("Попытка закрыть окно");
        return true;
    },
    afterClose: function() {
        console.log("Окно закрыто и удалено из DOM");
    }
});

// Программное закрытие через 3 секунды
setTimeout(function() {
    $.featherlight.current().close();
}, 3000);

В этом примере модальное окно автоматически закроется через 3 секунды после открытия, при этом будет вызвана цепочка колбэков beforeClose и afterClose.

Важные нюансы

  • Если метод close вызывается, когда окна нет (текущий экземпляр не существует), ошибок не возникает — Featherlight просто игнорирует вызов.
  • Любые события и колбэки, привязанные к элементам модального окна, после закрытия будут удалены вместе с DOM-узлами.
  • Метод close безопасно использовать в асинхронных сценариях, например после AJAX-запроса, чтобы закрыть окно после получения данных.

Метод close является фундаментальной частью управления модальными окнами в Featherlight. Его корректное использование позволяет управлять поведением интерфейса, освобождать ресурсы и выполнять дополнительные действия при закрытии окна, обеспечивая чистый и предсказуемый DOM.

Оглавление