Display
- Overlay appears centred on the screen with smooth animation
- Background overlay darkens the underlying page
- Focus moves to the overlay when it opens
- Page content becomes inert (non-interactive)
Dismissal
Users can close overlays through:
- Close button — Click the × icon button in the header
- Escape key — Press Escape to close the overlay
- Background click — Click outside the overlay on the dimmed background
- Action button — Complete viewing or dismiss via footer buttons
Always provide multiple ways to close overlays. Users expect consistent dismissal behaviour.
Focus management
- When the overlay opens, focus moves to the first focusable element (typically the close button)
- Focus is trapped within the overlay while it is open
- When the overlay closes, focus returns to the element that triggered it
Scrolling
- When overlay content exceeds the viewport height, a scrollbar appears
- Users can scroll within the overlay to access all content
- Background page content does not scroll while the overlay is open