Работа с selector

В библиотеке Toastify параметр selector используется для указания DOM-элемента, внутри которого будет отображаться уведомление. По умолчанию уведомления добавляются в <body>, но часто требуется выводить тосты в определённой части страницы, например, внутри модального окна или конкретного контейнера.

Основной синтаксис

При создании тоста с помощью Toastify объект конфигурации может содержать поле selector:

Toastify({
    text: "Пример уведомления",
    duration: 3000,
    selector: "#custom-container" // CSS-селектор целевого элемента
}).showToast();

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

  • Значение selector должно быть строкой, соответствующей CSS-селектору.
  • Если элемент не найден в DOM, уведомление автоматически добавляется в <body>.
  • Можно использовать как ID (#id), так и класс (.class) или любой валидный CSS-селектор.

Использование с различными элементами

  1. С ID элемента Позволяет привязать уведомление к конкретному элементу по идентификатору:
Toastify({
    text: "Сообщение для блока #notifications",
    selector: "#notifications",
    duration: 4000
}).showToast();
  1. С классом элемента Если в DOM несколько элементов с одинаковым классом, уведомление будет вставлено в первый найденный:
Toastify({
    text: "Тост в первом контейнере с классом .toast-area",
    selector: ".toast-area",
    duration: 5000
}).showToast();
  1. С более сложным селектором Можно использовать вложенные селекторы или селекторы атрибутов:
Toastify({
    text: "Тост в определённой секции",
    selector: "section[data-role='alerts']",
    duration: 3500
}).showToast();

Влияние selector на позиционирование

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

Например:

#custom-container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}
Toastify({
    text: "Тост внутри кастомного контейнера",
    selector: "#custom-container",
    gravity: "top", // top или bottom
    position: "left", // left, center, right
    duration: 3000
}).showToast();

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

Динамическое создание контейнера

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

const container = document.createElement("div");
container.id = "dynamic-toast";
document.body.appendChild(container);

Toastify({
    text: "Динамический контейнер",
    selector: "#dynamic-toast",
    duration: 2500
}).showToast();

Это гарантирует, что библиотека сможет корректно найти элемент.

Ограничения и особенности

  • selector не поддерживает массивы элементов — только один элемент.
  • Если селектор указан неверно или элемент отсутствует, библиотека автоматически использует <body>.
  • Внутри модальных окон и скрытых блоков тосты могут некорректно отображаться, так как offsetHeight и offsetWidth могут быть равны нулю.

Резюме по работе с selector

  • selector позволяет контролировать контейнер для тоста.
  • Селектор должен указывать на существующий DOM-элемент.
  • Позиционирование тоста меняется в зависимости от родительского элемента.
  • Для динамически создаваемых элементов нужно убедиться, что они присутствуют в DOM до вызова .showToast().

Использование selector даёт полное управление местом вывода уведомлений и помогает интегрировать Toastify в сложные интерфейсы, где стандартное добавление в <body> недостаточно.

Оглавление