Blocking background content and focus on modal

Question

Blocking background content and focus on modal. I am using mdbreact. I have a table that has a delete and edit buttons in each row and I do not want the user to click these buttons when the modal is shown up.

Answer 1

You can use the css pseudo element ::backdrop : https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

It will place

a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode .

So if you have a dialog modal for example it is perfect to prevent any click in the background.

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>

Answer 2

I used disableBackdrop prop from MDBReact as the following:

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

For more info you can read here: https://mdbootstrap.com/docs/react/modals/basic/#docsTabsAPI