Modal

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
Alerts
Videos
Images
Forms
Help text
System timeout
Tooltips
User feedback

Sample

Example

Source code

Modal trigger button

Modal


  
    
      
        This is the modal container's heading.
        
      
      This is the modal container's body.

Implementation notes

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-toggle tells Bootstrap to open the modal.
data-bs-target tells Bootstrap which element will open. When a person selects a link or button with that ID ( #modalid ), that modal will appear.

Usage

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.

Accessibility

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