阻止背景内容并专注于模态答案

【问题标题】：Blocking background content and focus on modal阻止背景内容并专注于模态
【发布时间】：2020-05-05 14:24:43
【问题描述】：

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

【问题讨论】：

标签： reactjs mdbreact

【解决方案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>

【讨论】：

【解决方案2】：

我使用了 MDBReact 的 disableBackdrop 属性，如下所示：

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

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

【讨论】：