Modal
Modals appear as a temporary overlay on top of a webpage’s content. They are often used to display additional information, notifications, or interactive components without requiring users to navigate to another website.
Overview
When to use
- To display additional information to users without navigating away from the website
- For important information like alerts or urgent notifications that require immediate attention
- To confirm what will happen before users take an action
Best practices
Use sparingly
Modals are highly disruptive and may overwhelm users.
Make exits clear
Make sure it's clear to users how they can close the modal.
Behaviors
Modals usually appear as an overlay on the user interface. When this happens, users will not be able to interact with other content on the page until the user has completed the tasks or closed the modal window.
When a modal is activated, it typically displays as an overlay that covers the rest of the content. This indicates that the interactions outside the modal are disabled until it is closed by the user.
References
U.S. Web Design System (USWDS)
What is a Modal and when should I use one?, HubSpot
Modals, Carbon Design System
Best Practices for Modal Window Design, UXPlanet