Подтверждение действий

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

Основы Micromodal

Micromodal — это небольшая, но мощная библиотека для создания модальных окон. Она позволяет быстро создавать модальные окна с минимальными усилиями. В контексте подтверждения действий, она упрощает создание интерфейсов с диалогами, которые требуют от пользователя принятия решения (например, “Удалить?” или “Сохранить изменения?”).

Для начала использования библиотеки нужно подключить её к проекту. Это можно сделать через CDN, NPM или скачав библиотеку вручную.

<!-- Подключение через CDN -->
<script src="https://cdn.jsdelivr.net/npm/micromodal@0.4.10/dist/micromodal.min.js"></script>

Структура модального окна

Для создания модального окна с подтверждением действия потребуется HTML-разметка. Рассмотрим пример модального окна, которое будет использоваться для подтверждения удаления записи.

<!-- Модальное окно подтверждения -->
<div class="modal micromodal-slide" id="delete-modal" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1">
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="delete-modal-title">
      <header class="modal__header">
        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
        <h2 class="modal__title" id="delete-modal-title">Подтвердите удаление</h2>
      </header>
      <main class="modal__content">
        <p>Вы уверены, что хотите удалить этот элемент? Это действие нельзя будет отменить.</p>
      </main>
      <footer class="modal__footer">
        <button class="modal__btn modal__btn--primary" id="confirm-delete">Удалить</button>
        <button class="modal__btn" data-micromodal-close>Отмена</button>
      </footer>
    </div>
  </div>
</div>

Здесь создаётся модальное окно с ID delete-modal, которое содержит два действия: подтверждение удаления (кнопка “Удалить”) и отмена действия (кнопка “Отмена”).

Инициализация и открытие модального окна

После того как разметка готова, нужно настроить открытие и закрытие модального окна через JavaScript. Для этого используется API библиотеки Micromodal.

Micromodal.init({
  disableScroll: true,  // Отключает прокрутку за пределами модала
  awaitCloseAnimation: true, // Ожидает анимацию закрытия перед удалением модала
});

С помощью функции Micromodal.init() настраивается поведение модальных окон. В данном случае, отключена прокрутка под модальным окном и добавлена задержка на анимацию при его закрытии.

Чтобы открыть модальное окно, достаточно вызвать:

Micromodal.show('delete-modal');

Этот вызов откроет окно с ID delete-modal. Важно отметить, что для каждого модального окна необходимо указать уникальный идентификатор.

Обработка действий внутри модала

Для выполнения действий, таких как удаление записи, необходимо добавить обработчики событий для кнопок подтверждения и отмены. При клике на кнопку “Удалить” вызывается функция, которая будет выполнять нужное действие.

document.getElementById('confirm-delete').addEventListener('click', function() {
  // Выполнение действия подтверждения
  deleteItem();
  // Закрытие модала после выполнения действия
  Micromodal.close('delete-modal');
});

Здесь, при нажатии на кнопку “Удалить”, выполняется функция deleteItem(), которая отвечает за удаление элемента. Затем модальное окно закрывается с помощью Micromodal.close().

Для кнопки “Отмена” модальное окно будет закрыто автоматически, так как она имеет атрибут data-micromodal-close.

Применение кастомных анимаций

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

Для этого достаточно настроить CSS-классы, которые будут отвечать за анимацию:

/* Анимация открытия */
.modal__overlay {
  animation: fadeIn 0.3s ease;
}

/* Анимация закрытия */
.modal--close .modal__overlay {
  animation: fadeOut 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

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

Оптимизация пользовательского опыта

Модальные окна подтверждения могут стать более удобными с дополнительными возможностями:

  • Отключение возможности закрыть окно кликом вне его области. Для этого можно отключить клик по фону:

    Micromodal.init({
  disableOverlayClose: true,
});

  • Фокусировка на кнопке “Удалить” после открытия модала:

    Micromodal.init({
  onShow: (modal) => {
    modal.querySelector('.modal__btn--primary').focus();
  },
});

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

    setTimeout(() => {
  Micromodal.close('delete-modal');
}, 5000); // Закрыть модал через 5 секунд

Заключение

Библиотека Micromodal предоставляет все необходимые инструменты для создания модальных окон подтверждения действий. Она лёгкая в использовании и может быть настроена под конкретные потребности проекта. С помощью этой библиотеки можно легко реализовать диалоговые окна для подтверждения удаления или других важных действий, при этом учитывая удобство и интуитивно понятное взаимодействие с пользователем.

Оглавление