How to prevent clicking outside a popover HTML element?

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?