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

Библиотека Noty предоставляет простой способ создания уведомлений с возможностью их автоматического или ручного закрытия. Любое уведомление создаётся через конструктор new Noty(options), где options — это объект с настройками. Одной из ключевых опций является timeout, которая определяет, через какое время уведомление будет автоматически закрыто:

let n = new Noty({
    text: 'Успешная операция',
    type: 'success',
    timeout: 3000, // автоматически закрывается через 3 секунды
}).show();

Метод show() отображает уведомление, а close() закрывает его программно:

n.close();

Использование close() полезно, когда требуется закрыть уведомление по событию, например, по нажатию кнопки или после завершения асинхронной операции.

Варианты закрытия уведомления

1. Автоматическое закрытие через timeout

Опция timeout может быть указана в миллисекундах. Если значение false, уведомление не закроется автоматически:

new Noty({
    text: 'Это уведомление останется до закрытия вручную',
    type: 'alert',
    timeout: false
}).show();

2. Ручное закрытие по событию

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

let n = new Noty({
    text: 'Нажмите кнопку для закрытия',
    type: 'warning',
    timeout: false
}).show();

document.querySelector('#close-btn').addEventListener('click', function() {
    n.close();
});

3. Закрытие по клику на уведомление

Опция dismissQueue в комбинации с clickToClose позволяет пользователю закрывать уведомление кликом:

new Noty({
    text: 'Кликните для закрытия',
    type: 'information',
    timeout: false,
    closeWith: ['click']
}).show();

closeWith поддерживает массив действий: 'click' и 'button' (закрытие по кнопке в уведомлении).

Программное закрытие нескольких уведомлений

Noty поддерживает управление очередью уведомлений. Если уведомлений несколько, их можно закрывать программно по определённой логике:

let notifications = [];
for (let i = 0; i < 3; i++) {
    let n = new Noty({
        text: `Уведомление ${i + 1}`,
        type: 'info',
        timeout: false
    }).show();
    notifications.push(n);
}

// Закрыть все уведомления через 5 секунд
setTimeout(() => {
    notifications.forEach(n => n.close());
}, 5000);

Это полезно для массового очищения уведомлений после завершения действий пользователя.

События закрытия уведомления

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

let n = new Noty({
    text: 'Следим за закрытием',
    type: 'success',
    timeout: 4000,
    callbacks: {
        onClose: function() {
            console.log('Уведомление закрыто');
        },
        onClosed: function() {
            console.log('Анимация закрытия завершена');
        }
    }
}).show();
  • onClose вызывается в момент начала закрытия уведомления (например, при клике или истечении таймера).
  • onClosed вызывается после завершения анимации закрытия, когда уведомление полностью удалено из DOM.

Настройка анимации при закрытии

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

new Noty({
    text: 'С анимацией закрытия',
    type: 'alert',
    timeout: 3000,
    animation: {
        open: 'animated fadeIn',
        close: 'animated fadeOut'
    }
}).show();

Использование кастомных классов анимации позволяет создавать уникальные эффекты исчезновения и появления уведомлений.

Принудительное закрытие через очередь

Если уведомления добавляются в очередь (queue: 'global'), их можно принудительно закрывать через методы очереди:

Noty.closeAll(); // закрывает все уведомления на странице
Noty.closeAll('alert'); // закрывает только уведомления типа alert

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

Заключение по работе с закрытием

В Noty существует гибкая система управления закрытием уведомлений: от автоматического таймера до ручного закрытия через события и глобальные методы. Контроль над жизненным циклом уведомления позволяет интегрировать библиотеку в сложные интерфейсы с динамическими действиями пользователя, не перегружая DOM и обеспечивая прозрачную систему уведомлений.

Оглавление