Dean Leigh (@deanleigh.bsky.social)

How to dismiss native HTML dialog elements when the backdrop is clicked The HTML <dialog> element is a browser-native way to create dialog modals. It handles a lot of (but not all of) the accessibility stuff out-of-the-box. By default, the <dialog> element is closed when… You explicitly run the .close() method on it, or The user presses a <button> with the [formmethod="dialog"] attribute (or inside a method="dialog" form), or The user presses the Esc key. For most custom modals, clicking or tapping the backdrop, the dark area outside of the modal, also closes it. https://gomakethings.com/how-to-dismiss-native-html-dialog-elements-when-the-backdrop-is-clicked/