阻止背景内容并专注于模式

Question

屏蔽背景内容，专注于模式。我正在使用mdbreact。我有一个表格，在每一行都有一个删除和编辑按钮，我不希望用户在显示模式时单击这些按钮。

Answer 1

您可以使用css伪元素::backdrop：https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

它会放在

一个框，该框的大小为视口的大小，在全屏模式下呈现的任何元素的正下方。

因此，如果你有一个对话框模式，例如，它是完美的，以防止任何点击在后台。

​

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

我使用了来自MDBReact的disableBackdrop prop，如下所示：

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

欲了解更多信息，请点击此处：https://mdbootstrap.com/docs/react/modals/basic/#docsTabsAPI