Modal
A dialog box that appears over the main content and requires user interaction before continuing. Used to capture leads or confirm critical actions.
Definition
A modal is an overlay component that focuses user attention on a specific task or information. It dims the background content and typically requires user action (confirmation, dismissal, or data entry) before returning to the main interface.
Common uses include confirmations, forms, alerts, and focused workflows.
Why It Matters
Modals interrupt user flow intentionally, which can be valuable for critical information or dangerous actions. However, overuse creates friction and annoyance.
Accessibility considerations require proper focus management, keyboard navigation, and screen reader support.
Examples in Practice
A delete confirmation modal prevents accidental data loss by requiring explicit confirmation.
An email signup modal appears after 30 seconds on site, capturing leads but risking user frustration.
A checkout modal allows users to complete payment without leaving their shopping cart.