Структура объекта опций

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

1. element

Этот параметр принимает DOM-элемент, который будет использоваться в качестве контента модального окна. Это может быть любой HTML-элемент, такой как div, img, или другой элемент, содержащий нужный контент.

Пример:

const lightbox = basicLightbox.create(
  document.querySelector('img')
);

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

2. onClose

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

Пример:

const lightbox = basicLightbox.create(
  '<p>Моё модальное окно</p>',
  {
    onClose: () => {
      console.log('Модальное окно закрыто');
    }
  }
);

3. onShow

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

Пример:

const lightbox = basicLightbox.create(
  '<div>Новый контент</div>',
  {
    onShow: () => {
      console.log('Модальное окно открыто');
    }
  }
);

4. closable

Этот параметр управляет возможностью закрыть модальное окно при клике на фон. По умолчанию этот параметр установлен в true, что означает, что модальное окно закроется при клике вне его границ. Если значение параметра изменить на false, закрытие окна таким способом будет невозможно.

Пример:

const lightbox = basicLightbox.create(
  '<p>Текст</p>',
  {
    closable: false
  }
);

5. draggable

Управляет возможностью перетаскивания модального окна. Этот параметр позволяет пользователям перемещать окно по экрану, если значение установлено в true. В противном случае окно будет неподвижным.

Пример:

const lightbox = basicLightbox.create(
  '<div>Перетаскиваемое окно</div>',
  {
    draggable: true
  }
);

6. disableScroll

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

Пример:

const lightbox = basicLightbox.create(
  '<p>Текст без прокрутки</p>',
  {
    disableScroll: true
  }
);

7. hideOverlay

Параметр, управляющий видимостью фона окна. Если значение установлено в true, фон (оверлей) будет скрыт, и модальное окно отобразится без затемнения фона. По умолчанию оверлей виден.

Пример:

const lightbox = basicLightbox.create(
  '<div>Без затемнения</div>',
  {
    hideOverlay: true
  }
);

8. open

Этот параметр указывает, будет ли окно открыто автоматически сразу после инициализации. Если значение установлено в false, окно нужно будет открыть вручную с помощью метода show().

Пример:

const lightbox = basicLightbox.create(
  '<p>Скрытое окно</p>',
  {
    open: false
  }
);

// Открытие окна вручную
lightbox.show();

9. iframe

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

Пример:

const lightbox = basicLightbox.create(
  '<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
  {
    iframe: true
  }
);

10. padding

Позволяет настроить отступы внутри модального окна. Это может быть полезно для регулировки пространства между контентом и рамками окна. Значение может быть задано как строка с указанием размеров отступов (например, "10px", "1em", или "2rem").

Пример:

const lightbox = basicLightbox.create(
  '<div>Контент с отступами</div>',
  {
    padding: '20px'
  }
);

11. overlayOpacity

Определяет прозрачность фона (оверлея), который появляется за модальным окном. Это значение принимает числа от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это позволяет настроить степень затемнения фона в зависимости от предпочтений.

Пример:

const lightbox = basicLightbox.create(
  '<p>Прозрачный фон</p>',
  {
    overlayOpacity: 0.3
  }
);

12. animation

Позволяет настроить анимацию для появления и исчезновения модального окна. Это может быть полезно для улучшения пользовательского интерфейса. Библиотека поддерживает несколько типов анимаций, таких как fade, scale, или можно задать свои кастомные анимации.

Пример:

const lightbox = basicLightbox.create(
  '<p>С анимацией</p>',
  {
    animation: 'fade'
  }
);

Заключение

Объект опций библиотеки BasicLightbox предлагает широкие возможности для настройки модальных окон. Параметры, такие как element, onClose, closable, и многие другие, позволяют точно настроить поведение и внешний вид модальных окон в зависимости от нужд проекта.

Оглавление