There is No Need to Trap Focus on a Dialog Element
<dialog> (even in modal mode). <dialog> (even in modal mode). You know how there are JavaScript dialogs for alerting, confirming, and prompting user actions? Say you want to replace JavaScript dialogs with the new HTML dialog element.…
A look from Christian Kozalla on the <dialog> HTML element and using it to create a nice-looking and accessible modal. …
Have you ever clicked on an image on a webpage that opens up a larger version of the image with navigation to view other photos?
Some folks call it a pop-up. Others call it a lightbox. Bootstrap calls it a …
JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:
alert("Hello, World!");
The UI for this varies from browser to browser, but generally you’ll see a little window pop up front and center in …
In this week’s roundup: “Add to home screen” has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how third-party sites may be coming to a modal near you.…
Modals always be just appearin’. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from “above” or “below.” But we can get weirder …
Dec. 3, 2025: A minor tweak in Chrome 144 makes it possible to prevent page scrolling by declaring overscroll-behavior on both the dialog element and the backdrop and set it to the contain value. More information is available in this …
Chris Manning digs into <dialog>:
…A dialog element provides:
- An element that is easy to show and hide, including an
openboolean attribute on the element itself.- Two versions: a standard popover or modal version.
- A ::backdrop pseudo-element for modal