I’m using a popover element to display a loading spinner while performing an asynchronous action like so
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>
As you can see there are 2 problems
- One can close the shown popover by clicking outside
- One can access elements “behind” the popover, e.g. clicking the button again
Based on How to disable clicking inside div adding pointer-events:none
to #loading-screen
did not help. How do I fix this?