Настройка overlay

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

Включение overlay

Для активации overlay необходимо использовать параметр modal при создании уведомления. Его значение по умолчанию — false. Если задать true, Noty создаст затемнённый фон, блокирующий доступ к остальной части страницы:

new Noty({
    text: 'Важное уведомление!',
    type: 'alert',
    modal: true,
    timeout: 5000
}).show();

Ключевые моменты:

  • modal: true создаёт overlay, который по умолчанию имеет фиксированное полупрозрачное затемнение.
  • Уведомление автоматически центрируется на экране при включённом overlay.
  • Можно комбинировать с параметрами layout и theme для достижения необходимого визуального эффекта.

Настройка стиля overlay

Библиотека Noty предоставляет возможность тонкой настройки внешнего вида overlay через CSS-класс .noty_modal. Можно изменить цвет фона, прозрачность, добавить анимацию появления:

.noty_modal {
    background-color: rgba(0, 0, 0, 0.7);
    transition: background-color 0.3s ease;
}

Рекомендации по стилям:

  • Использовать rgba вместо hex, чтобы легко управлять прозрачностью.
  • Добавлять плавные переходы через transition, чтобы overlay не появлялся резко.
  • Можно применить backdrop-filter: blur(4px); для размытия контента страницы под уведомлением.

Управление кликом на overlay

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

const myNoty = new Noty({
    text: 'Нажмите на фон, чтобы закрыть уведомление',
    modal: true,
    closeWith: ['click']
}).show();
  • closeWith: ['click'] позволяет закрывать уведомление при клике на overlay.
  • Можно комбинировать с timeout для автоматического скрытия через заданный промежуток времени.
  • Дополнительно можно использовать кастомные обработчики событий через метод on('onClick', callback) для реализации сложной логики.

Анимация overlay

Overlay можно анимировать совместно с уведомлением, используя CSS-классы анимации, назначаемые через animation:

new Noty({
    text: 'Анимированное уведомление с overlay',
    modal: true,
    animation: {
        open: 'animated fadeIn',
        close: 'animated fadeOut'
    }
}).show();
  • Библиотека не накладывает ограничения на тип анимации, можно использовать любую библиотеку CSS-анимаций.
  • Для плавного появления overlay рекомендуется синхронизировать анимацию появления уведомления с анимацией затемнения.

Программное управление overlay

Overlay создаётся автоматически при modal: true, но доступ к DOM элементу можно получить для динамической кастомизации:

const n = new Noty({ text: 'Custom overlay', modal: true }).show();

const overlayElement = document.querySelector('.noty_modal');
overlayElement.style.cursor = 'pointer';
overlayElement.addEventListener('click', () => alert('Overlay clicked'));
  • Позволяет добавлять интерактивность, например подсказки или дополнительные действия при клике.
  • Можно динамически менять стиль overlay в зависимости от состояния приложения.

Особенности совместимости

  • Overlay корректно работает со всеми современными браузерами.
  • В мобильных браузерах overlay иногда может блокировать скроллинг страницы; для управления этим используется свойство CSS overflow: hidden на <body>:
body.noty_modal_open {
    overflow: hidden;
}
  • Noty автоматически добавляет этот класс при открытии уведомления с modal: true.

Комбинация с другими параметрами Noty

Overlay идеально сочетается с:

  • layout: center, topCenter, bottomCenter для размещения уведомления в центре экрана.
  • theme: для создания визуально согласованных уведомлений.
  • buttons: интерактивные кнопки внутри уведомления для подтверждений или действий.

Такое сочетание позволяет создавать полнофункциональные модальные уведомления с кастомной анимацией и поведением overlay, полностью управляемые через Noty.

Оглавление