Modal dialog
Modal dialogs, also known as modals, communicate information using an overlaid window that allows users to remain within the context of their workflow, but demands their attention.
Usage
Modals are used for creating, editing, and completing local actions.
Modals allow users to remain within the context of their workflow. For example, a user may need to create a new case related to the one they are currently viewing. They may be minimized and “docked” to the bottom of the screen, allowing users to review or copy other application content directly into the modal while they work.
Modals can be closed via the escape key, a Cancel button, or by clicking the backdrop outside of the modal.
In the Constellation UX System, modals may increase in size to fit wider content within. Additionally, modals are affixed to the top of the screen, so if content is conditionally shown as users work, the vertical position of the modal does not shift vertically. This saves users from re-orienting their view.
Variations
Confirm dialog
Confirm dialogs are displayed when users take an action that will result in a significant change, such as loss of data. For example, a confirm dialog can display when a user tries to leave a form that has unsaved changes.
Minimizable modal
Modals can be minimized to be re-opened at any point. When minimized, the modal heading will appear in the bottom right of the viewport. From here, the modal can either be closed, or re-opened by clicking on the header.
Content guidelines
Modal confirm dialogs that are used to confirm an action (for example, confirming that a user wants to discard their changes), should have matching or complementary modal header and primary button text. For example, if the modal header reads “Discard changes?”, the primary button text should read “Discard”.
Configuration
No configuration is needed for this component in Constellation.
All information on this site pertains to the Constellation UX System (from 8.8 and onwards). Looking for something else? See resources specifically for Theme Cosmos. If you have questions, concerns, or any other feedback, please reach to us on Pega Support and include the capability 'User Experience' and 'Constellation' in your request.