Структура документации

Библиотека BasicLightbox предназначена для создания простых модальных окон, с использованием минимального объема кода и максимально удобного интерфейса для пользователя. Основная цель библиотеки — предоставить разработчику средство для быстрого отображения контента в виде модальных окон (или «попапов») с возможностью кастомизации. Структура документации предоставляет полный обзор всех ключевых элементов, методов и опций, которые могут быть использованы при работе с этой библиотекой.

1. Общая информация о библиотеке

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

2. Установка

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

  • Через CDN:

    Для использования BasicLightbox через CDN достаточно добавить в HTML-документ следующие строки в блок <head>:

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

  • Через npm:

    Если проект использует npm, библиотеку можно установить с помощью команды:

    npm install basiclightbox

    Затем подключить её в JavaScript-файле:

    import basicLightbox from 'basiclightbox';

3. Основные методы библиотеки

Основным элементом библиотеки является объект basicLightbox, который используется для создания модальных окон.

  • Создание модального окна:

    Для создания нового модального окна необходимо вызвать функцию basicLightbox.create(). Эта функция принимает в качестве параметра HTML-контент, который будет отображён в окне:

    const instance = basicLightbox.create('<p>Ваш контент</p>');
instance.show();

  • Показ окна:

    После создания экземпляра модального окна его можно отобразить с помощью метода show():

    instance.show();

  • Скрытие окна:

    Чтобы скрыть модальное окно, используется метод close():

    instance.close();

  • Проверка видимости окна:

    Метод visible() позволяет проверить, отображается ли модальное окно в данный момент:

    if (instance.visible()) {
  console.log('Окно открыто');
}

4. Настройка и параметры

При создании модального окна можно передать дополнительные параметры для изменения его поведения и внешнего вида.

  • Закрытие по клику вне окна:

    По умолчанию модальное окно можно закрыть, кликнув по его фону. Это поведение можно изменить, передав параметр closable: false:

    const instance = basicLightbox.create('<p>Ваш контент</p>', {
  closable: false
});
instance.show();

  • Задержка перед закрытием:

    Чтобы задать задержку перед скрытием окна, можно использовать параметр delay, указав время в миллисекундах:

    const instance = basicLightbox.create('<p>Ваш контент</p>', {
  delay: 3000  // Закрытие через 3 секунды
});
instance.show();

  • Открытие и закрытие с анимацией:

    Для включения анимаций при открытии и закрытии окна используется параметр animation:

    const instance = basicLightbox.create('<p>Ваш контент</p>', {
  animation: 'fade'
});
instance.show();

5. Обработчики событий

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

  • Событие открытия окна:

    Для обработки события открытия окна можно использовать метод onShow():

    const instance = basicLightbox.create('<p>Ваш контент</p>');
instance.onShow(() => {
  console.log('Окно открылось');
});
instance.show();

  • Событие закрытия окна:

    Для обработки события закрытия окна используется метод onClose():

    const instance = basicLightbox.create('<p>Ваш контент</p>');
instance.onClose(() => {
  console.log('Окно закрыто');
});
instance.show();

6. Кастомизация стилей

Хотя библиотека предоставляет базовые стили для модальных окон, для дальнейшей кастомизации внешнего вида можно использовать собственные CSS-правила.

Основные элементы, которые могут быть стилизованы:

  • Фон окна: элемент .basicLightbox можно использовать для изменения фона окна.
  • Текст: для изменения текста внутри окна используется элемент .basicLightbox .content.
  • Кнопка закрытия: элемент .basicLightbox .basicLightbox__button позволяет кастомизировать внешний вид кнопки закрытия.

Пример стилей:

.basicLightbox {
  background-color: rgba(0, 0, 0, 0.8);
}
.basicLightbox .content {
  color: #fff;
  font-size: 18px;
}
.basicLightbox .basicLightbox__button {
  color: #f00;
}

7. Рабочий пример

Ниже приведён пример полного рабочего кода, который демонстрирует основные возможности библиотеки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BasicLightbox Example</title>
  <link href="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.1/dist/basicLightbox.min.css" rel="stylesheet">
</head>
<body>

  <button id="openModal">Открыть модальное окно</button>

  <script src="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.1/dist/basicLightbox.min.js"></script>
  <script>
    document.getElementById('openModal').addEventListener('click', () => {
      const instance = basicLightbox.create('<p>Это модальное окно.</p>');
      instance.show();
    });
  </script>
</body>
</html>

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

8. Заключение

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

Оглавление