Типичные ошибки и их решение

Одной из самых распространённых ошибок при работе с iziToast является некорректное подключение библиотеки. Часто разработчики подключают только CSS или только JS, что приводит к неработоспособности уведомлений. Правильное подключение выглядит следующим образом:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

После подключения стоит проверить доступность глобального объекта iziToast:

console.log(typeof iziToast); // Должно вывести 'object'

Если вывод undefined, необходимо убедиться, что скрипт подключен после подключения jQuery (если используется версия, зависящая от jQuery) или проверить путь к файлу.

Ошибки при вызове уведомлений

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

iziToast.show('Сообщение'); // ❌ Неверно

Метод show требует объект с параметрами:

iziToast.show({
    title: 'Информация',
    message: 'Сообщение успешно отправлено',
    position: 'topRight'
});

2. Отсутствие обязательных полей

  • message – обязательное для отображения уведомления.
  • title – не обязательное, но без него уведомление может выглядеть пустым.

Пример правильного вызова без title:

iziToast.show({
    message: 'Произошла ошибка'
});

Проблемы с позиционированием

  • position может принимать значения: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center.
  • Ошибка: указание значения вне списка приведёт к отображению уведомления по умолчанию (topRight).
iziToast.show({
    title: 'Ошибка',
    message: 'Неверная позиция',
    position: 'middle' // ❌ Ошибка, корректные варианты: topCenter, bottomCenter, center
});

Конфликты CSS и визуальные баги

  1. Переопределение стилей — если в проекте есть глобальные CSS-правила для div или .iziToast с position, z-index или margin, уведомления могут сдвигаться или перекрываться. Решение: использовать изолированную область или явно задавать стили через опцию toastClass:
iziToast.show({
    message: 'Тест',
    toastClass: 'custom-toast'
});

И в CSS:

.custom-toast {
    font-size: 14px;
    z-index: 99999 !important;
}
  1. Блокировка видимости — при использовании модальных окон с высоким z-index уведомление может оказаться под ними. В этом случае корректируется z-index через опцию overlay или кастомный класс.

Ошибки при работе с коллбэками

iziToast поддерживает события: onOpening, onOpened, onClosing, onClosed. Часто ошибки возникают из-за неверного синтаксиса:

iziToast.show({
    message: 'Пример',
    onClosing: function(instance, toast){
        console.log('Уведомление закрывается');
    }
});

Типичные ошибки:

  • Передача не функции, а строки:
onClosed: "alert('Закрыто')" // ❌ Ошибка
  • Использование стрелочной функции без параметров, когда требуется доступ к instance или toast.

Проблемы с автозакрытием

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

iziToast.show({
    message: 'Секундное уведомление',
    timeout: 5 // ❌ Неверно, интерпретируется как 5 мс
});

Правильно:

iziToast.show({
    message: 'Секундное уведомление',
    timeout: 5000 // 5 секунд
});

Если требуется, чтобы уведомление не закрывалось автоматически:

iziToast.show({
    message: 'Требуется действие пользователя',
    timeout: false
});

Ошибки при работе с кнопками

  • Опция buttons принимает массив функций, которые возвращают HTML-элементы.
  • Частая ошибка — попытка передать строку вместо функции:
buttons: [
    '<button>Закрыть</button>' // ❌ Ошибка
]

Правильный синтаксис:

buttons: [
    ['<button>Закрыть</button>', function (instance, toast) {
        instance.hide({ transitionOut: 'fadeOut' }, toast, 'buttonName');
    }]
]

Масштабирование и адаптивность

  • Уведомления не адаптируются автоматически под контейнеры с фиксированной шириной.
  • Ошибка: использование max-width через глобальный CSS, что приводит к обрезке текста.

Рекомендуется использовать встроенную опцию maxWidth:

iziToast.show({
    message: 'Длинное уведомление',
    maxWidth: 400
});

Совместимость с фреймворками

При использовании React, Vue или Angular:

  • Ошибка: прямой вызов iziToast.show() внутри JSX или шаблона Vue.
  • Решение: вызывать уведомление внутри методов жизненного цикла или обработчиков событий, чтобы DOM был готов:
methods: {
    notify() {
        iziToast.show({ message: 'Пример уведомления' });
    }
}

Эти примеры охватывают самые частые ошибки при работе с iziToast и показывают, как их правильно диагностировать и исправлять. Контроль синтаксиса, параметров и CSS-стилей позволяет добиться корректного и стабильного отображения уведомлений во всех сценариях.

Оглавление