Как остановить поведение по умолчанию модального элемента в компонентах углеродного дизайна, «щелкнув за пределами модального окна, которое он закрывает»?

Question

Я использую атрибуты данных для использования модального режима в реакции через carbon-components, но предыдущее решение по загрузке не работает.

Как:

data-backdrop="static" 

Answer 1

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

Модальная демоверсия

Событие называется onRequestClose, которое сработает, если щелкнуть по кнопке закрытия или вне модального окна. Событие возвращает объект события, который вы можете проверить для цели и использовать preventDefault(), чтобы прекратить закрытие модального окна.

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

Пример кода для примера:

document.addEventListener('modal-beinghidden', function(evt) {
  if (myApplication.shouldModalKeptOpen(evt.target)) {
    evt.preventDefault();
  }
});