# and popover: Baseline layered UI patterns

DevFeed: [and popover: Baseline layered UI patterns](<https://devfeed.tech/articles/and-popover-baseline-layered-ui-patterns-4156.md>)

Original publisher: [Read original article](<https://web.dev/articles/baseline-in-action-dialog-popover?hl=en>)

Author: David A Herron Homepage

Published: 2025-11-25T08:00:00Z

Content type: article

Language: en

Sources: [web.dev: Articles](<https://devfeed.tech/sources/web-dev-articles.md>)

Topics: [dialog](<https://devfeed.tech/topics/dialog.md>), [aria](<https://devfeed.tech/topics/aria.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Web](<https://devfeed.tech/topics/web.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [article](<https://devfeed.tech/tags/article.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [modal](<https://devfeed.tech/tags/modal.md>), [ui](<https://devfeed.tech/tags/ui.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [user-interface](<https://devfeed.tech/tags/user-interface.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

## AI overview

This article explains how to build modal and popover UI patterns with features built into modern web browsers. It demonstrates a sign-up modal that appears when a user tries to save an image to a favorites list without being logged in, and discusses the accessibility behavior required for modal dialogs.

## Source excerpt

Learn how to build UI patterns for modal windows and prompts using the and popover web features.