C10. Modals
- Japneet Kaur (Deactivated)
Analytics
Release notes
Date | Update | Updated by |
|---|---|---|
13 Dec 2021 | Component finalised | @Japneet Kaur (Deactivated) @Steven Mao (Unlicensed) |
Overview
Objective:
Modal windows are a form of dialog that appears as an overlay on the existing webpage.
Use Case:
Modals should be used sparingly as they are disruptive to the user flow. Modals can be used in cases where the user needs to complete short tasks. In cases where the user needs to complete many tasks, a content page should be considered instead.
Business Rules
BR-# | Business Rules |
|---|---|
BR-1 | Rich text, image, accordion, form and CTA can be placed inside a modal (There is no restriction from a CMS perspective) |
BR-2 | If a user selects a cross icon OR any element outside the modal, THEN the modal is dismissed |
BR-3 | On mobile, modal width is edge to edge |
BR-4 | On desktop, modal width can be configured to be big (8 col) or small (6 col) |
BR-5 | On mobile and desktop, modal height will be governed by the content |
BR-6 | On mobile and desktop, modal will be visually centred on the screen |
BR-7 | If there is content beyond the modal area, then the modal becomes vertically scrollable |
BR-8 | If rich-text table horizontally extends beyond the modal, then the table (only) is scrollable (nothing else scrolls i.e. text below and above) |
BR-9 | Each modal will have an AEM-configured ID to anchor it to open upon selecting specific text |
BR-10 | If user selects text linked to a modal, then modal opens |
BR-11 | When the modal appears it disables all the functionality on the page except the modal itself |
Designs
Desktop | Mobile |
|---|---|
 Desktop placeholder
|  Mobile placeholder
|
CMS Elements
# | Field | Description | Details | Mandatory |
|---|---|---|---|---|
1 | Modal ID | Unique ID to map against text href anchor | Text: CMS | Y |
2 | Modal size | Width of modal on desktop | Dropdown:
| N
|