Параметр modal

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

Синтаксис

new Noty({
    text: 'Пример модального уведомления',
    type: 'alert',
    modal: true,
    timeout: false
}).show();

Разбор параметров:

  • text — содержимое уведомления. Может быть текстом, HTML-строкой или шаблоном.
  • type — тип уведомления (alert, success, warning, error, info).
  • modal — логическое значение (true или false). При true создаётся фон, блокирующий взаимодействие с остальной частью страницы.
  • timeout — время автоматического закрытия уведомления. Для модальных уведомлений часто устанавливается false, чтобы пользователь сам закрыл уведомление.

Визуальное поведение

При установке modal: true библиотека автоматически:

  1. Создаёт полупрозрачный слой поверх всего содержимого страницы.
  2. Перекрывает клики по элементам, расположенным под уведомлением.
  3. При необходимости блокирует прокрутку страницы, предотвращая взаимодействие с фоновым контентом.

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

Комбинация с другими параметрами

timeout

  • Для модальных уведомлений обычно timeout: false, чтобы уведомление не исчезало автоматически.
  • Если указать время в миллисекундах, уведомление закроется через заданный интервал, но фон останется заблокированным до исчезновения.

buttons

  • Часто модальные уведомления используют кнопки для действий пользователя:
new Noty({
    text: 'Вы уверены, что хотите удалить файл?',
    type: 'warning',
    modal: true,
    buttons: [
        Noty.button('Да', 'btn btn-success', function() {
            console.log('Файл удалён');
            n.close();
        }),
        Noty.button('Нет', 'btn btn-error', function() {
            n.close();
        })
    ]
}).show();
  • Кнопки полностью интегрируются с модальным окном и управляют закрытием уведомления.

theme и layout

  • Модальное уведомление можно стилизовать любым тематическим оформлением.
  • Расположение (layout) обычно устанавливают в center для модальных окон, но можно использовать и другие позиции с соответствующей корректировкой фона.

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

  • На мобильных устройствах полупрозрачный фон автоматически подстраивается под размер экрана.
  • Блокировка прокрутки страницы работает корректно, предотвращая случайные свайпы.
  • Если нужно разрешить прокрутку, modal можно отключить или использовать CSS-правила для управления overflow.

Программное управление

Модальные уведомления поддерживают полный API Noty:

let n = new Noty({
    text: 'Загрузка данных...',
    type: 'info',
    modal: true,
    timeout: false
}).show();

// Закрыть программно
n.close();

// Изменить текст динамически
n.setText('Данные загружены');
  • n.show() — отображение уведомления.
  • n.close() — закрытие уведомления и удаление фона.
  • n.setText() — изменение содержимого без закрытия.

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

  1. Множественные модальные уведомления: если создать несколько уведомлений с modal: true, Noty автоматически управляет фоновым слоем, но визуальная перегрузка возможна. Рекомендуется использовать одно активное модальное уведомление одновременно.
  2. События: модальные уведомления поддерживают все стандартные события (onShow, onClose, onClick), что позволяет гибко реагировать на действия пользователя.
  3. Производительность: создание модального слоя незначительно влияет на рендеринг страницы, но при частом создании/удалении уведомлений стоит учитывать нагрузку на DOM.

Модальный режим Noty — мощный инструмент для создания уведомлений, требующих явного взаимодействия пользователя. Он обеспечивает фокусировку внимания, блокирует фоновые элементы и легко комбинируется с кнопками, темами и событиями.

Оглавление