如何防止点击弹出框 HTML 元素外部？

Question

我正在使用弹出框元素来显示加载旋转器，同时执行像这样的异步操作

function doAsyncStuff() {
  const loadingScreenHtmlElement = document.getElementById("loading-screen");

  loadingScreenHtmlElement.showPopover();

  setTimeout(() => {
    loadingScreenHtmlElement.hidePopover();
  }, 3000);
}

#loading-screen::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

<div popover id="loading-screen">
  <div>Loading spinner goes here</div>
</div>

<button onclick="doAsyncStuff()">Do it</button>

如您所见，有两个问题

• 可以通过单击外部来关闭显示的弹出窗口
• 可以访问弹出窗口“后面”的元素，例如再次点击按钮

基于如何禁用在div内单击，将

pointer-events:none

添加到

#loading-screen

没有帮助。我该如何解决这个问题？

Answer 1

可以通过单击外部来关闭显示的弹出窗口

这是

popover=auto

的默认行为（快捷键：

popover

）。

自动状态和“轻关闭”

当弹出窗口元素设置为 popover 或 popover="auto" 如上所示，则称其具有 auto 状态。关于自动状态需要注意的两个重要行为是：

弹出窗口可以“轻微关闭” - 这意味着您可以通过单击弹出窗口外部来隐藏弹出窗口。

因此

popover=manual

将阻止在单击外部时关闭弹出窗口。

function doAsyncStuff() {
  const loadingScreenHtmlElement = document.getElementById("loading-screen");

  loadingScreenHtmlElement.showPopover();

  setTimeout(() => {
    loadingScreenHtmlElement.hidePopover();
  }, 3000);
}

#loading-screen::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

<div popover='manual' id="loading-screen">
  <div>Loading spinner goes here</div>
</div>

<button onclick="doAsyncStuff()">Do it</button>