Программное закрытие

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

Метод close()

Основной метод, который используется для программного закрытия окна в BasicLightbox, это close(). Этот метод завершает работу с модальным окном, скрывая его с экрана и освобождая все связанные с ним ресурсы.

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

const lightbox = basicLightbox.create(`
  <img src="image.jpg" alt="Example Image">
`);

lightbox.show();

// Закрытие модального окна после 3 секунд
setTimeout(() => {
  lightbox.close();
}, 3000);

В данном примере создаётся модальное окно, которое отображает изображение. После трёх секунд оно автоматически закрывается, вызывая метод close().

Программное закрытие в ответ на события

Для управления закрытием окна в ответ на пользовательские события, таких как нажатие на кнопки или другие элементы на странице, также можно использовать метод close(). Это даёт гибкость в настройке логики закрытия модального окна. Например, можно создать кнопку закрытия в самом окне и привязать к ней обработчик события, который будет вызывать close().

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

const lightbox = basicLightbox.create(`
  <div>
    <img src="image.jpg" alt="Example Image">
    <button id="close-btn">Закрыть</button>
  </div>
`);

lightbox.show();

document.getElementById('close-btn').addEventListener('click', () => {
  lightbox.close();
});

Здесь создаётся модальное окно с изображением и кнопкой закрытия. При нажатии на кнопку окно будет закрыто.

Закрытие по завершении анимации

Одной из особенностей работы с модальными окнами является возможность привязать событие закрытия к завершению анимации. Для этого можно использовать метод setTimeout или обработчики событий для отслеживания окончания анимации. Это полезно, если необходимо обеспечить плавное закрытие с анимацией перед скрытием окна.

Пример с задержкой:

const lightbox = basicLightbox.create(`
  <div>
    <img src="image.jpg" alt="Example Image">
  </div>
`);

lightbox.show();

// Плавное закрытие с задержкой
setTimeout(() => {
  lightbox.close();
}, 500); // Закрытие через 500 миллисекунд после отображения

Здесь используется задержка в 500 миллисекунд для того, чтобы окно успело отобразиться перед его скрытием.

Ожидание закрытия

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

Пример с промисом:

function openLightbox() {
  return new Promise((resolve) => {
    const lightbox = basicLightbox.create(`
      <img src="image.jpg" alt="Example Image">
    `);

    lightbox.show();

    setTimeout(() => {
      lightbox.close();
      resolve();
    }, 3000);
  });
}

openLightbox().then(() => {
  console.log('Модальное окно закрыто');
});

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

Обработка нескольких окон

Когда на странице используется несколько модальных окон, может возникнуть необходимость закрытия всех окон одновременно или поочередно. Для этого можно хранить ссылки на все открытые окна в массиве или объекте и программно управлять их состоянием.

Пример с несколькими окнами:

const lightboxes = [];

for (let i = 0; i < 3; i++) {
  const lightbox = basicLightbox.create(`
    <img src="image${i}.jpg" alt="Example Image ${i}">
  `);
  lightbox.show();
  lightboxes.push(lightbox);
}

// Закрытие всех окон через 5 секунд
setTimeout(() => {
  lightboxes.forEach(lightbox => lightbox.close());
}, 5000);

Здесь создаются три модальных окна, которые отображаются одновременно. Через пять секунд все окна закрываются программно с помощью метода close().

Интеграция с другими библиотеками

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

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

import React, { useState } from 'react';
import basicLightbox from 'basiclightbox';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  let lightbox;

  const openLightbox = () => {
    lightbox = basicLightbox.create('<img src="image.jpg" alt="Example Image">');
    lightbox.show();
    setIsOpen(true);
  };

  const closeLightbox = () => {
    lightbox.close();
    setIsOpen(false);
  };

  return (
    <div>
      <button onCl ick={openLightbox}>Открыть окно</button>
      {isOpen && <button onCl ick={closeLightbox}>Закрыть окно</button>}
    </div>
  );
}

export default App;

В этом примере использование React позволяет отслеживать состояние окна и управлять его закрытием с помощью состояния компонента.

Заключение

Программное закрытие модальных окон в библиотеке BasicLightbox является неотъемлемой частью работы с такими окнами. Использование метода close(), взаимодействие с другими событиями и библиотеками даёт разработчику гибкость и контроль над поведением окон. Управление открытием и закрытием окон позволяет создавать более динамичные и удобные интерфейсы, соответствующие требованиям современного веб-программирования.

Оглавление