A <dialog> Starter

Click this button to show the dialog.

<button onclick="demo.showModal()">Show dialog</button>

<dialog id="demo" closedby="any">
  <header>
    <button onclick="this.closest('dialog').close('Close button')">
      Close
    </button>
  </header>
</dialog>
The duration is intentionally slow so you can verify all the proper elements are transitioning .

That chunk of styles is how you transition a popover. Transitions are generally preferred because they can be interrupted, dismissed, closed, or just have to deal with high demands of invoking; elegantly.

In case you’re curious the difference betwen a popover and a dialog, or what it is to be modal, this blog post by Hidde has everything you need: https://hidde.blog/dialog-modal-popover-differences/

To see how this script can be used to meet 2020+ UX expectations, check my post have a dialog.