For displaying notifications in modals, please see Notifications (modal). The key differences between the two are:
- Modal dialogues can have more content and are triggered by the user
- Notifications (modal) display short information, triggered by the system
The width of modals adapts itself to their content (as long as there’s enough space on the screen). If necessary, the width can be overridden by setting the width style on <sdx-dialog-content />, or by using grid classes like .col-md-12 or .col-md-6.
The Troubleshooting page helps when there are layout issues.
We recommend to set a space above the buttons in the dialogue to 32px.
Modal dialogue
A modal dialogue appears on top of the main content and moves the system into a special mode, requiring user interaction. Modals are a heavyweight design choice only appropriate when users truly must interact with them in order to continue their current task. The content on the page is disabled and darkened until the user explicitly interacts with the overlay.
There are two ways to align the text: left and centred
Closable modal
The closable modal allows users to perform specific actions or provides important information. These modals are less intrusive as they let users continue their activity and close the modal if it becomes irrelevant.