Other names: popup window, overlay, dialog
A modal displays content in a temporary window that appears over the current page.
Modals require an interaction (acknowledge, submit, close) from the visitor before they can return to the content underneath.
Modals can display:
- Privacy statements
- Licensing agreements
- Help text
- System timeout
- User feedback
Modal trigger button
Each modal has it's own ID. To trigger the modal, you'll need to include a link or a button that refers to the modal's ID. The markup for the trigger element might look like this:
The button element has two custom data attributes:
data-bs-toggletells Bootstrap to open the modal.
data-bs-targettells Bootstrap which element will open. When a person selects a link or button with that ID (
#modalid), that modal will appear.
When and how to use it
Modals interrupt your visitor. Use them sparingly and only when the content or interaction is critical to your visitors’ success.
Always provide a clear way for people to dismiss the modal (close icon, close button).
How not to use it
Do not use the modal for complex decision making that requires additional sources of information.
Do not use for nonessential or unrelated information.
Do not use modals to show confirmation, success, or error messages.
Avoid multiple steps that require navigation within the modal.
Simplify by removing unnecessary elements or content that does not support the task.
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes