Система подтверждений действий

iziToast — это легкая и гибкая библиотека для создания уведомлений в браузере на JavaScript. Одной из её ключевых возможностей является реализация системы подтверждений действий пользователя: от простого подтверждения удаления элемента до сложных модальных диалогов с выбором нескольких опций.

Создание простого окна подтверждения

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

iziToast.show({
    title: 'Подтвердите действие',
    message: 'Вы уверены, что хотите удалить этот элемент?',
    timeout: false,
    close: false,
    overlay: true,
    displayMode: 2,
    position: 'center',
    buttons: [
        ['', function (instance, toast) {
            console.log('Действие подтверждено');
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }, true],
        ['', function (instance, toast) {
            console.log('Действие отменено');
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

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

  • timeout: false — уведомление не исчезает автоматически, требуется действие пользователя.
  • overlay: true — затемнение фона, создаёт эффект модального окна.
  • displayMode: 2 — обеспечивает правильное перекрытие уведомлений, блокируя взаимодействие с остальной страницей.
  • buttons — массив массивов, каждый из которых задаёт HTML кнопки, функцию обработки клика и булево значение для выделения кнопки по умолчанию.

Настройка внешнего вида уведомлений

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

  • backgroundColor и color — цвета фона и текста.
  • titleColor и messageColor — цвета заголовка и сообщения.
  • icon — добавление иконки для визуального акцента (например, предупреждения или ошибки).
  • zindex — контроль уровня наложения для модальных окон на страницах с множеством элементов.

Пример кастомного стиля для окна подтверждения:

iziToast.show({
    title: 'Внимание',
    message: 'Данное действие нельзя отменить!',
    theme: 'dark',
    icon: 'icon-warning',
    timeout: false,
    overlay: true,
    buttons: [
        ['', function(instance, toast){
            instance.hide({}, toast);
        }],
        ['', function(instance, toast){
            instance.hide({}, toast);
        }]
    ]
});

Последовательные действия с подтверждением

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

['', function(instance, toast){
    instance.hide({}, toast);
    iziToast.show({
        title: 'Подтверждено',
        message: 'Элемент удалён успешно',
        color: 'green',
        timeout: 3000
    });
}]

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

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

function confirmAction(message) {
    return new Promise((resolve, reject) => {
        iziToast.show({
            title: 'Подтверждение',
            message: message,
            timeout: false,
            overlay: true,
            buttons: [
                ['', function(instance, toast){
                    instance.hide({}, toast);
                    resolve(true);
                }],
                ['', function(instance, toast){
                    instance.hide({}, toast);
                    resolve(false);
                }]
            ]
        });
    });
}

// Пример использования
confirmAction('Удалить запись?').then((confirmed) => {
    if (confirmed) {
        console.log('Запись удалена');
    } else {
        console.log('Удаление отменено');
    }
});

Продвинутая кастомизация кнопок

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

['', function(instance, toast){
    this.innerHTML = 'Обработка...';
    setTimeout(() => {
        instance.hide({}, toast);
    }, 1500);
}]

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

Поддержка нескольких типов уведомлений

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

  • color: 'red' — критические действия (удаление, сброс настроек).
  • color: 'orange' — предупреждения, потенциально опасные операции.
  • color: 'green' — успешное выполнение или подтверждение действий.

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

Оглавление