Animating the Dialog Element

By Matthew Morete on

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.

Menus, toasts and more with the Popover API, the dialog element, invokers, anchor positioning and @starting-style

By Ollie Williams on

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 […]

Scroll-Locked Dialogs

By Chris Coyier on

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.) […]

Basic Dialog Usage and Gotchas To Watch For

By Chris Coyier on

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 […]