Блокировка фонового содержимого и акцент на модальном

Question

Блокировка фонового содержимого и ориентация на модал. Я использую mdbreact. У меня есть таблица с кнопками удаления и редактирования в каждой строке, и я не хочу, чтобы пользователь нажимал эти кнопки при отображении модального окна.

Answer 1

Я использовал disableBackdrop prop из MDBReact следующим образом:

<Modal disableBackdrop="true" ... />

Для получения дополнительной информации вы можете прочитать здесь: https://mdbootstrap.com/docs/react/modals/basic/#docsTabsAPI

Answer 2

Вы можете использовать css псевдоэлемент ::backdrop: https://developer.mozilla.org/en-US/docs/Web/CSS/ :: фон

Это поместит

коробку размером области просмотра, которая отображается непосредственно под любым элементом, представленным в полноэкранном режиме.

Так что, если у вас, например, есть модальное диалоговое окно, это идеально, чтобы предотвратить любой щелчок в фоновом режиме.

var modal = document.getElementById("modal");

function closeModal() {
    modal.close()
}

function showModal() {
    modal.showModal()
}

dialog {
  width: 80%;
  top: "50px";
}

dialog::backdrop {
  background: rgba(255,0,0,.25);
}

<button onclick="showModal()">Open Modal</button>
<button onclick="alert('Hey')">Test Click in background</button>

<dialog id="modal"> 
<h3>A cool modal</h3>
<button onclick="closeModal()">Close Modal</button>
</dialog>