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

Библиотека Noty позволяет создавать настраиваемые уведомления с различными опциями поведения, включая возможность закрытия уведомления при клике на кнопку. Для этого используются объекты buttons в конфигурации уведомления, которые определяют поведение при нажатии.

Простейший пример кнопки закрытия выглядит так:

new Noty({
    text: 'Это уведомление можно закрыть кнопкой',
    layout: 'topRight',
    type: 'alert',
    buttons: [
        Noty.button('Закрыть', 'btn btn-error', function(n) {
            n.close();
        })
    ]
}).show();

Разбор ключевых моментов:

  • Noty.button(text, className, callback) – создаёт кнопку.

    • text — текст на кнопке.
    • className — CSS-класс для стилизации.
    • callback — функция, которая вызывается при клике по кнопке. Внутри этой функции доступен объект уведомления n, у которого можно вызвать метод .close() для закрытия уведомления.

  • Метод .close() немедленно закрывает текущее уведомление, вызывая анимацию скрытия.

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

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

new Noty({
    text: 'Вы уверены, что хотите удалить запись?',
    layout: 'topRight',
    type: 'warning',
    modal: true,
    buttons: [
        Noty.button('Да', 'btn btn-success', function(n) {
            console.log('Удаление подтверждено');
            n.close();
        }),
        Noty.button('Нет', 'btn btn-error', function(n) {
            console.log('Удаление отменено');
            n.close();
        })
    ]
}).show();

Особенности:

  • Порядок кнопок влияет на их визуальное расположение.
  • Кнопки можно стилизовать индивидуально через классы или встроенные стили.
  • Метод .close() может принимать аргумент callback, если требуется выполнить дополнительные действия после закрытия.

Автоматическое закрытие уведомления при клике по кнопке без явного n.close()

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

new Noty({
    text: 'Нажмите на кнопку, чтобы закрыть уведомление',
    layout: 'topRight',
    type: 'info',
    closeWith: ['button'], // позволяет закрывать уведомление кнопкой
    buttons: [
        Noty.button('Закрыть', 'btn btn-primary')
    ]
}).show();

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

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

Noty предоставляет методы управления уведомлениями через события:

  • on('onClose', callback) — вызывается при закрытии уведомления.
  • on('onClick', callback) — можно использовать для создания логики закрытия по пользовательскому клику на любую часть уведомления.

Пример:

let n = new Noty({
    text: 'Нажмите кнопку, чтобы закрыть уведомление и выполнить действие',
    layout: 'topRight',
    type: 'success',
    buttons: [
        Noty.button('Закрыть', 'btn btn-success', function(n) {
            n.on('onClose', function() {
                console.log('Уведомление закрыто через кнопку');
            });
            n.close();
        })
    ]
}).show();

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

Динамическое добавление кнопки для закрытия

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

let n = new Noty({
    text: 'Динамическое уведомление',
    layout: 'topRight',
    type: 'alert'
}).show();

setTimeout(() => {
    n.setText('Добавлена кнопка закрытия');
    n.buttons([
        Noty.button('Закрыть', 'btn btn-danger', function(n) {
            n.close();
        })
    ]);
}, 2000);

Такой подход полезен, если кнопка должна появляться только после определённого события или таймера.

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

  • Использовать классы btn, btn-success, btn-error и другие из библиотеки CSS (например, Bootstrap) для единообразного стиля.

  • Можно добавлять иконки через HTML в текст кнопки:

    Noty.button('<i class="fa fa-times"></i> Закрыть', 'btn btn-danger', function(n) {
    n.close();
})

  • Для компактных уведомлений рекомендуется ограничивать количество кнопок до двух — это улучшает восприятие пользователем.

Благодаря комбинации методов .close(), кнопок Noty.button и событий onClose, библиотека Noty предоставляет гибкий механизм для управления закрытием уведомлений по клику на кнопку, включая как простое закрытие, так и выполнение дополнительных действий.

Оглавление