Dialog

They are pretty similar in both look and functionality, but are have some important differences, slightly different APIs, and functionality. The use cases are also a bit different, so let’s have a look!

It’s not that modals are all automatically bad, it’s that, as Adrian Egger says, “modals are the crutch of the inarticulate design and developer” and they “are easily replaced with other patterns that are less jarring.” on the dedicated site for this crusade: modalzmodalzmodalz.com. Adrian’s personal site is sweet, too.

Now that we’re starting to see better support for @starting-style and the allow-discrete keyword, we’ve got a pretty straightforward way for defining *different* entry and exit states.

I’m first hearing about the CloseWatcher API after running across Abdelrahman Awad’s blog post about it. The MDN docs are quite direct, making the purpose clear: Some UI components have “close behavior”, meaning that the component appears, and the user can close it when they are finished with it. For example: sidebars, popups, dialogs, or […]

It might seem like you could just set a transition on the opacity of the dialog element in CSS from 0 to 1, but it doesn’t work. You’ll need to learn about @starting-style, and the overlay and allow-discrete keywords.

Dropdowns, menus, tooltips, comboboxes, toasts — the popover attribute will make building a large variety of UI components easier. The popover attribute can be used on any HTML element, so you have the flexibility to choose whichever element is most appropriate semantically for each particular use case. Unlike a dialog, a popover is always non-modal […]

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]

The <dialog> element in HTML is tremendous. We’ve got support across the board now, so using it is a smart plan. Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where […]