Множественные экземпляры

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

Создание нескольких экземпляров

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

Пример:

import BasicLightbox from 'basiclightbox';

const lightbox1 = BasicLightbox.create('<img src="image1.jpg" />');
const lightbox2 = BasicLightbox.create('<img src="image2.jpg" />');

document.querySelector('#openLightbox1').addEventListener('click', () => {
  lightbox1.show();
});

document.querySelector('#openLightbox2').addEventListener('click', () => {
  lightbox2.show();
});

В этом примере создаются два модальных окна с изображениями, и каждый экземпляр можно открывать независимо с помощью разных элементов на странице.

Управление экземплярами

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

lightbox1.show();  // Открыть первый экземпляр
lightbox2.show();  // Открыть второй экземпляр

Метод close() закрывает модальное окно, если оно открыто:

lightbox1.close();  // Закрыть первый экземпляр

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

Взаимодействие с другими экземплярами

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

Пример:

const lightbox1 = BasicLightbox.create('<img src="image1.jpg" />');
const lightbox2 = BasicLightbox.create('<img src="image2.jpg" />');

document.querySelector('#openLightbox1').addEventListener('click', () => {
  lightbox1.show();
  lightbox2.close();  // Закрыть второй экземпляр при открытии первого
});

document.querySelector('#openLightbox2').addEventListener('click', () => {
  lightbox2.show();
  lightbox1.close();  // Закрыть первый экземпляр при открытии второго
});

Такой подход помогает предотвратить визуальные проблемы, возникающие при открытии множества окон одновременно.

Модификация контента нескольких экземпляров

Каждое модальное окно в BasicLightbox создаётся с помощью HTML-кода, который передаётся в метод create. Контент можно менять динамически, при необходимости подменяя HTML в уже созданных экземплярах. Например, если нужно заменить изображение, можно обновить содержимое модального окна, вызвав метод element() и изменив HTML-код:

lightbox1.element().innerHTML = '<img src="new-image.jpg" />';
lightbox2.element().innerHTML = '<img src="another-image.jpg" />';

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

Статус модальных окон

BasicLightbox предоставляет метод visible() для проверки, открыто ли модальное окно. Это полезно для предотвращения открытия уже открытого окна или для создания логики, где открытие одного окна зависит от состояния других.

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

if (!lightbox1.visible()) {
  lightbox1.show();
}

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

Заключение

Работа с множественными экземплярами модальных окон в BasicLightbox проста и эффективна. Каждый экземпляр независим, что даёт разработчику большую гибкость при создании интерфейсов. Основные методы, такие как show(), close(), и visible(), позволяют контролировать поведение окон, а также добавлять сложную логику взаимодействия между ними. Возможность динамической замены контента помогает создавать более интерактивные и адаптивные пользовательские интерфейсы.

Оглавление