1

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.

Paul
  • 211
  • 1
  • 6
  • 19

2 Answers2

0

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>
A. Ecrubit
  • 561
  • 6
  • 20
0

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

Paul
  • 211
  • 1
  • 6
  • 19