1

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

4

2 回答 2

0

您可以使用 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>

于 2020-05-02T13:31:49.900 回答
0

我使用了 MDBReact 的 disableBackdrop 道具，如下所示：

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

有关更多信息，您可以在此处阅读：https ://mdbootstrap.com/docs/react/modals/basic/#docsTabsAPI

于 2020-05-05T06:24:43.133 回答