Skip to header Skip to main navigation Skip to sub navigation Skip to main content Skip to sidebar Skip to footer

Compass Web Framework

    1. Home
    2. Components
  1. Content
  2. Modal


Also known as: Pop-up window

Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content. They require the user to take an action.


Example of the Compass modal component opened [View Image]

Open the example modal.

Code reference

When to use

Modals are used to reveal critical information, show information without losing context or prompt a user response. Modals focus the user's attention on a single piece of content without taking them to a new screen.

How to use

Creating a modal

Linking a modal



All modals require:

Accessibility considerations

Quick links

View graphic versionView graphic versionView graphic version