Переопределение настроек

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

Основные параметры настройки

Когда вызывается метод MicroModal.init(), можно передать объект с параметрами. Каждый из этих параметров можно переопределить в процессе инициализации, что позволяет создавать модальные окна с индивидуальным поведением. Рассмотрим основные из них.

1. openClass

Этот параметр определяет класс, который будет добавлен элементу модального окна при его открытии. По умолчанию это класс "is-open", но можно задать любой другой, что может быть полезно при использовании CSS-анимированных переходов.

MicroModal.init({
  openClass: 'modal-is-open'
});

2. disableScroll

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

MicroModal.init({
  disableScroll: false
});

3. disableFocus

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

MicroModal.init({
  disableFocus: true
});

4. awaitOpenAnimation

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

MicroModal.init({
  awaitOpenAnimation: true
});

5. awaitCloseAnimation

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

MicroModal.init({
  awaitCloseAnimation: true
});

6. onShow

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

MicroModal.init({
  onShow: function(modal) {
    console.log(modal);
  }
});

7. onClose

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

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

Переопределение параметров при открытии

Micromodal позволяет переопределять параметры для конкретных модальных окон, что дает дополнительную гибкость в настройке поведения. Это делается через объект с настройками, передаваемый в метод open().

MicroModal.show('modal-1', {
  openClass: 'custom-open-class',
  disableScroll: false
});

В данном примере модальное окно с идентификатором modal-1 будет открыто с классом custom-open-class и без отключения прокрутки страницы. Это позволяет использовать разные настройки для разных окон, не влияя на другие экземпляры.

Пример использования с несколькими модальными окнами

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

MicroModal.init({
  openClass: 'modal-is-open',
  disableScroll: true
});

MicroModal.show('modal-1', {
  disableFocus: true
});

MicroModal.show('modal-2', {
  disableScroll: false
});

В этом примере для первого окна используется стандартная настройка прокрутки и фокусировки, а для второго окна отключена прокрутка.

Дополнительные рекомендации

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

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

Оглавление