我正在使用弹出框元素来显示加载旋转器,同时执行像这样的异步操作
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
没有帮助。我该如何解决这个问题?
可以通过单击外部来关闭显示的弹出窗口
这是
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>