show

Метод show является основным способом отображения модальных окон в библиотеке Micromodal. Он позволяет программно инициировать показ модального окна, которое ранее было скрыто.

Основная структура вызова

Метод show вызывается на объекте модального окна. Этот объект создается с использованием конфигурации и инициализируется с помощью метода Micromodal.init(). Когда необходимо показать модальное окно, достаточно передать идентификатор модального элемента в метод show.

Пример синтаксиса:

Micromodal.show('modal-1');

Здесь 'modal-1' — это идентификатор модального окна, который должен совпадать с атрибутом data-micromodal-id в HTML-разметке.

Параметры метода

Метод show принимает два основных параметра:

  1. id (обязательный параметр) — строка, указывающая идентификатор модального окна, которое нужно показать. Идентификатор должен соответствовать атрибуту data-micromodal-id в HTML.

  2. options (необязательный параметр) — объект, который позволяет настроить дополнительные параметры модального окна. Этот объект может включать следующие свойства:

    • disableScroll: если установлено в true, прокрутка страницы будет отключена при открытии модального окна.
    • disableFocus: если установлено в true, фокус не будет перемещаться на модальное окно.
    • awaitCloseAnimation: если установлено в true, вызов метода show будет ждать завершения анимации закрытия предыдущего модального окна, прежде чем открыть следующее.
    • openTrigger: элемент, который будет использоваться для инициирования открытия модального окна (по умолчанию — кнопка с атрибутом data-micromodal-trigger).

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

Micromodal.show('modal-1', {
  disableScroll: true,
  awaitCloseAnimation: true
});

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

Принцип работы метода

Когда вызывается Micromodal.show(), библиотека выполняет несколько ключевых шагов:

  1. Поиск модального окна: Метод ищет в DOM элемент с указанным идентификатором и проверяет его существование.

  2. Добавление классов для показа: После того как элемент найден, библиотека добавляет классы, которые активируют видимость модального окна и запускают соответствующие анимации.

  3. Блокировка прокрутки: В случае, если включен параметр disableScroll, прокрутка страницы блокируется, чтобы пользователь не мог прокручивать страницу за пределы модального окна.

  4. Фокусировка на модальном окне: Если включен параметр disableFocus, фокус остается на элементе, с которого было вызвано окно. В противном случае фокус автоматически перемещается на первое доступное поле ввода внутри модального окна (если оно присутствует).

  5. Анимация открытия: Если модальное окно настроено с анимацией, она будет воспроизведена после применения классов для отображения.

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

Рассмотрим пример реализации модального окна с использованием Micromodal.show(). В HTML создается элемент модального окна с идентификатором modal-1:

<div data-micromodal-id="modal-1" class="modal">
  <div class="modal__overlay">
    <div class="modal__container">
      <button data-micromodal-close class="modal__close">X</button>
      <h2 class="modal__title">Модальное окно</h2>
      <p class="modal__content">Текст в модальном окне.</p>
    </div>
  </div>
</div>

Чтобы показать это окно, можно вызвать Micromodal.show в Jav * aScript:

Micromodal.show('modal-1');

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

Ожидание закрытия анимации

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

Micromodal.show('modal-1', {
  awaitCloseAnimation: true
});

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

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

Чтобы закрыть модальное окно программно, используется метод Micromodal.close(). Он принимает один обязательный параметр — идентификатор модального окна, которое нужно закрыть:

Micromodal.close('modal-1');

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

Возможные ошибки

Если метод show вызывается с неверным идентификатором, например, если элемент с указанным идентификатором не существует в DOM, будет выброшена ошибка:

Error: Modal with id "modal-1" not found.

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

Заключение

Метод show в библиотеке Micromodal является удобным и гибким инструментом для управления отображением модальных окон на веб-страницах. Он позволяет не только инициировать показ модальных окон, но и тонко настраивать поведение в зависимости от требований проекта.

Оглавление