Diving into the Toplayer: Where Dialogs, Popovers, and Modals Live
summary
Dialog element now ships in all major browsers (Chrome 2014, Firefox last in 2022) and supports show() vs showModal adds to top layer so modal dialogs get automatic backdrop, focus trap and first-interactable focus; non-modal dialogs do not. Popover is an HTML attribute added to the top layer with light-dismiss and built-in keyboard ordering but has positioning quirks — use Floating UI or CSS anchor (anchor gains better support) to tether popovers. Top layer prevents z-index wars (you avoid hitting the 2,147,483,647 z-index limit) and is where requestFullscreen places content.
AI-written summary · about
chapters (8)
- 0:00Introduction to overlays
- 3:06History of web overlays
- 7:05Dialogue element explained
- 11:21Z-index problems and top layer
- 16:22Popover API deep dive
- 25:57CSS anchor for popovers
- 27:02Comparison of overlay types
- 29:06Timeline of top layer evolution
related talks
44mDialog dilemmas and modal mischief: a deep dive into popovers
48mThe New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS
32mHow popovers are about to become a whole lot easier to build
47mThe future of UI is "open"
21mInstall Nothing: App UIs With Native Browser APIs
32mNative Popovers with the Popover API
16mModal Windows for Everyone
24mIndependent Popups with Element Reparenting & The HTML Popover API