Modal Dialog
An overlay panel focuses attention on a single task — confirm an action, collect input, or display important information.
Also called: dialog, popup, lightbox
How it works
A fixed overlay covers the page. The dialog scales in while the backdrop fades. Close via button, overlay click, or Escape key.
- Trap focus inside the modal while open
- Lock body scroll with
overflow: hidden