Минимальный рабочий пример

Для начала работы с библиотекой BasicLightbox в JavaScript достаточно написать несколько строк кода. Библиотека предназначена для создания модальных окон с изображениями или контентом, который можно удобно просматривать. Основная цель — упростить процесс отображения контента в модальных окнах, без необходимости писать сложные функции или использовать громоздкие библиотеки.

Подключение библиотеки

Первым шагом необходимо подключить саму библиотеку. Она доступна через CDN или может быть скачана и подключена локально. Вот пример подключения через CDN:

<script src="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.0/dist/basicLightbox.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.0/dist/basicLightbox.min.css">

После того как библиотека подключена, можно приступать к написанию кода для отображения модального окна.

Создание базового модального окна

Самый простой способ создания модального окна с помощью BasicLightbox — это использование метода basicLightbox.create(), который принимает HTML-контент в качестве параметра. Для примера можно отобразить изображение в модальном окне.

<button id="openModal">Открыть изображение</button>
<script>
  const openModalButton = document.getElementById('openModal');

  openModalButton.addEventListener('click', () => {
    const instance = basicLightbox.create(`
      <img src="https://via.placeholder.com/800x600" alt="Пример изображения">
    `);

    instance.show();
  });
</script>

В данном примере кнопка “Открыть изображение” вызывает открытие модального окна с изображением. Когда пользователь нажимает на кнопку, срабатывает обработчик события click, который создает экземпляр модального окна с изображением и вызывает метод show() для отображения окна.

Закрытие модального окна

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

<button id="openModal">Открыть изображение</button>
<script>
  const openModalButton = document.getElementById('openModal');

  openModalButton.addEventListener('click', () => {
    const instance = basicLightbox.create(`
      <div>
        <img src="https://via.placeholder.com/800x600" alt="Пример изображения">
        <button id="closeModal">Закрыть</button>
      </div>
    `);

    const closeButton = instance.element().querySelector('#closeModal');
    closeButton.addEventListener('click', () => {
      instance.close();
    });

    instance.show();
  });
</script>

В этом примере добавляется кнопка с текстом “Закрыть”, которая закрывает модальное окно при нажатии. Метод element() возвращает DOM-элемент модального окна, позволяя добавлять обработчики событий к его дочерним элементам.

Рабочие моменты

  • HTML-контент может быть любым: изображениями, видео, текстом или любым другим элементом. Все, что требуется — это передать строку HTML в метод create().
  • Закрытие окна возможно как через клик по области вокруг модального окна, так и через программное закрытие с использованием метода close().

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

Оглавление