How to dismiss a popover or dialog

I’ve been digging into the new <select> element lately, and how its dropdown is dismissed got me thinking about dismissal more broadly: what are the best ways for users to close overlays like popovers and dialogs? Modal versus non-modal Before looking at how we dismiss these overlays, it’s worth understanding the distinction between modal and non-modal. A modal overlay makes the page behind it inert, meaning it can’t be interacted with until the overlay has been dismissed. The background page is often dimmed to indicate this, but not always. Keyboard focus usually stays inside the modal, looping from the last focusable item back to the first, until it’s dismissed. A non-modal overlay allows us to interact with the page behind it while it’s still open, including scrolling up and down. The distinction between popovers and dialogs themselves isn’t always clear-cut, but I’m not going to get into that; the dismissal methods I’ll describe can apply to either. Dismissal Trusty old MDN Docs…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town