Параметры конфигурации

Micromodal — это небольшая и лёгкая JavaScript-библиотека, предназначенная для работы с модальными окнами. Одной из ключевых особенностей является её простота в настройке и использовании. Однако для более гибкого контроля над поведением модальных окон, библиотека предоставляет ряд параметров конфигурации, которые позволяют детально настроить взаимодействие с пользователем.

Основные параметры конфигурации

Micromodal поддерживает несколько параметров, которые можно передать при инициализации модального окна. Каждый из них влияет на внешний вид, поведение или функциональность модала. Рассмотрим их более подробно.

target

Этот параметр указывает на элемент, который будет открываться как модальное окно. Значение target — это строка с CSS-селектором, который указывает на элемент в DOM, который будет использоваться в качестве модала. Если данный параметр не задан, библиотека попытается открыть первый модал, найденный на странице.

Micromodal.init({
  target: '#modal-1'
});

В данном примере будет открыт элемент с id modal-1. Важно, чтобы элемент с указанным идентификатором существовал в DOM, иначе библиотека не сможет корректно инициализировать модальное окно.

disableScroll

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

Micromodal.init({
  disableScroll: true
});

При включении данной опции, при активации модального окна, пользователю будет запрещено прокручивать контент страницы. Это улучшает пользовательский опыт и делает взаимодействие с модальным окном более удобным.

openTrigger

Этот параметр задаёт событие или элемент, который будет триггерить открытие модального окна. По умолчанию библиотека ожидает, что модальное окно будет открыто через клик на элемент с классом data-micromodal-trigger. Однако можно указать кастомный селектор или событие для этого действия.

Micromodal.init({
  openTrigger: '.custom-trigger'
});

В этом примере модальное окно будет открыто не через стандартный элемент с атрибутом data-micromodal-trigger, а при клике на элемент с классом custom-trigger.

closeTrigger

Так же, как и параметр openTrigger, параметр closeTrigger указывает на элемент или событие, с которым модальное окно будет закрываться. По умолчанию это элемент с классом data-micromodal-close, но можно указать собственный селектор для триггера закрытия.

Micromodal.init({
  closeTrigger: '.close-button'
});

В данном примере модальное окно будет закрываться при клике на элемент с классом close-button.

disableFocus

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

Micromodal.init({
  disableFocus: true
});

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

onShow

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

Micromodal.init({
  onShow: function(modal) {
    console.log('Модальное окно открыто:', modal);
  }
});

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

onClose

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

Micromodal.init({
  onClose: function(modal) {
    console.log('Модальное окно закрыто:', modal);
  }
});

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

Пример полной конфигурации

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

Micromodal.init({
  target: '#modal-1',
  disableScroll: true,
  openTrigger: '.open-modal-button',
  closeTrigger: '.close-modal-button',
  disableFocus: true,
  onShow: function(modal) {
    console.log('Модальное окно открыто:', modal);
  },
  onClose: function(modal) {
    console.log('Модальное окно закрыто:', modal);
  }
});

В данном примере модальное окно с id modal-1 будет открываться при клике на элемент с классом open-modal-button, а закрываться — при клике на элемент с классом close-modal-button. Прокрутка страницы будет заблокирована, а фокус не будет перемещаться на элементы внутри модала. Также будут выведены сообщения в консоль при открытии и закрытии окна.

Поддержка пользовательских событий

Micromodal позволяет не только использовать стандартные параметры, но и добавлять кастомные события для специфических нужд. Библиотека предоставляет возможность подписаться на события, такие как show и close, что даёт дополнительные возможности для создания динамичных интерфейсов.

document.addEventListener('micromodal:show', function(event) {
  console.log('Модальное окно открылось', event);
});

document.addEventListener('micromodal:close', function(event) {
  console.log('Модальное окно закрылось', event);
});

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

Заключение

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

Оглавление