Управление наложением

Библиотека iziToast предоставляет гибкий механизм отображения уведомлений с поддержкой наложения (overlay). Наложение представляет собой затемнённый или прозрачный слой, который перекрывает основное содержимое страницы, акцентируя внимание на уведомлении и блокируя взаимодействие с другими элементами до закрытия тоста. Управление наложением осуществляется через специальные параметры при вызове уведомления и глобальные настройки.

Включение и отключение наложения

Параметр overlay отвечает за включение или отключение затемнения фона:

iziToast.show({
    title: 'Внимание',
    message: 'Это уведомление с наложением',
    overlay: true
});
  • overlay: true — активирует затемнение всего экрана.
  • overlay: false — уведомление отображается без затемнения.

Наложение по умолчанию отключено. Этот параметр можно задавать как при отдельном вызове уведомления, так и глобально через iziToast.settings().

Настройка цвета и прозрачности наложения

Цвет и прозрачность наложения управляются через свойства overlayColor и overlayOpacity:

iziToast.show({
    title: 'Информация',
    message: 'Пользователь должен обратить внимание',
    overlay: true,
    overlayColor: 'rgba(0, 0, 0, 0.6)',
    overlayOpacity: 0.8
});
  • overlayColor — задаёт цвет наложения, поддерживаются любые CSS-значения (hex, rgba, hsla, color name).
  • overlayOpacity — управляет прозрачностью наложения (0 — полностью прозрачное, 1 — полностью непрозрачное).

Важно учитывать, что прозрачность в overlayColor и overlayOpacity комбинируется. Например, rgba(0,0,0,0.5) и overlayOpacity: 0.5 создадут более тёмный эффект.

Закрытие уведомления и наложения

Наложение автоматически закрывается при закрытии уведомления. Методы управления:

  • Автозакрытие через timeout:
iziToast.show({
    title: 'Автозакрытие',
    message: 'Наложение исчезнет вместе с уведомлением',
    overlay: true,
    timeout: 5000
});
  • Ручное закрытие через API:
const toast = iziToast.show({
    title: 'Закрытие вручную',
    message: 'Нажмите кнопку для закрытия',
    overlay: true,
    close: false
});

// Позднее закрытие
iziToast.destroy(toast);

iziToast.destroy() гарантирует удаление уведомления и наложения одновременно.

Множественные уведомления с наложением

Если на странице отображаются несколько уведомлений с overlay: true, библиотека создаёт только одно наложение. Оно останется активным, пока хотя бы одно уведомление с наложением не будет закрыто. Это предотвращает наложение нескольких тёмных слоёв, что улучшает UX.

iziToast.show({ title: 'Первое', overlay: true });
iziToast.show({ title: 'Второе', overlay: true });

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

Настройка взаимодействия с пользователем

Параметр overlayClose контролирует возможность закрытия уведомления кликом по затемнённой области:

iziToast.show({
    title: 'Закрытие кликом',
    message: 'Можно закрыть уведомление, кликнув по фону',
    overlay: true,
    overlayClose: true
});
  • overlayClose: true — клик по наложению закрывает уведомление.
  • overlayClose: false — наложение блокирует взаимодействие, клик игнорируется.

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

Глобальные настройки наложения

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

iziToast.settings({
    overlay: true,
    overlayColor: 'rgba(50, 50, 50, 0.7)',
    overlayClose: true
});

После такой конфигурации все последующие вызовы iziToast.show() будут автоматически использовать наложение без необходимости повторного указания параметров.

Применение наложения в кастомных сценариях

Наложение можно комбинировать с различными позициями (position) и типами уведомлений (success, error, info, warning). Например, для модального предупреждения:

iziToast.warning({
    title: 'Предупреждение',
    message: 'Данное действие невозможно отменить',
    overlay: true,
    overlayClose: false,
    position: 'center',
    timeout: false
});

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

Важные рекомендации

  1. Использовать наложение только для ключевых уведомлений, чтобы не раздражать пользователя.
  2. Контролировать прозрачность и цвет, чтобы сохранялась читаемость основного контента.
  3. При множественных уведомлениях следить за последовательностью закрытия, чтобы наложение не исчезло преждевременно.
  4. Совмещать с overlayClose для улучшения интерактивности модальных уведомлений.

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

Оглавление