Блокировка взаимодействия с интерфейсом

Библиотека Noty позволяет создавать уведомления в веб-приложениях, которые могут не только информировать пользователя, но и управлять его взаимодействием с интерфейсом. Для реализации блокировки взаимодействия с интерфейсом используются модальные уведомления, предотвращающие действия пользователя до закрытия уведомления.

Использование модального режима

В Noty включение модального режима осуществляется через параметр modal.

new Noty({
    text: 'Обработка данных...',
    type: 'info',
    modal: true,
    timeout: false
}).show();

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

  • modal: true — блокирует все клики по остальной части страницы.
  • timeout: false — уведомление не закрывается автоматически, пока не будет закрыто программно или вручную через кнопку.
  • При модальном режиме рекомендуется использовать счетчик загрузки или индикатор прогресса, чтобы пользователь понимал, что процесс выполняется.

Добавление кнопок для управления блокировкой

Блокировку интерфейса часто нужно сопровождать действиями пользователя, например подтверждением или отменой. В Noty это реализуется через параметр buttons.

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

Важные моменты:

  • Кнопки создаются с помощью Noty.button(text, className, callback).
  • this.close() закрывает уведомление и снимает блокировку интерфейса.
  • Можно комбинировать с любыми стилями кнопок, поддерживаемыми CSS-фреймворками.

Автоматическое снятие блокировки

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

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

// Снятие блокировки через 5 секунд
setTimeout(() => {
    n.close();
}, 5000);

Особенности реализации:

  • Таймер можно использовать для симуляции завершения операции.
  • Событие onClose позволяет выполнить дополнительные действия после снятия блокировки: очистку данных, запуск других функций.

Управление взаимодействием с элементами страницы

Noty в модальном режиме автоматически блокирует клики по фоновым элементам, но можно дополнительно управлять стилями элементов для визуального эффекта:

.noty_modal {
    background-color: rgba(0, 0, 0, 0.5); /* затемнение фона */
    pointer-events: auto; /* блокирует клики */
}

Применение:

  • Темное полупрозрачное покрытие делает блокировку заметной.
  • Свойство pointer-events: auto гарантирует, что клики на фоне будут игнорироваться.

Комбинирование с асинхронными процессами

При интеграции с AJAX-запросами или промисами модальное уведомление может оставаться на экране до завершения операции:

const n = new Noty({
    text: 'Сохраняем изменения...',
    type: 'info',
    modal: true,
    timeout: false
}).show();

fetch('/save', { method: 'POST', body: JSON.stringify(data) })
    .then(response => response.json())
    .then(() => {
        n.setText('Изменения сохранены!');
        setTimeout(() => n.close(), 2000);
    })
    .catch(() => {
        n.setText('Ошибка при сохранении!');
        n.setType('error');
        setTimeout(() => n.close(), 3000);
    });

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

  • setText() позволяет динамически изменять текст уведомления.
  • setType() изменяет визуальное оформление для информирования об успехе или ошибке.
  • Уведомление блокирует интерфейс до завершения асинхронного процесса.

Использование цепочек уведомлений

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

const step1 = new Noty({ text: 'Шаг 1...', type: 'info', modal: true, timeout: false }).show();
step1.on('afterClose', () => {
    const step2 = new Noty({ text: 'Шаг 2...', type: 'info', modal: true, timeout: false }).show();
});

Преимущества:

  • Гарантирует строгий порядок операций.
  • Удобно для форм с несколькими стадиями подтверждения.
Оглавление