Examples
Usage Notes
- The Modal component uses the Beryllium datasource template, shared with Feature and Toast. Only the
TitleandCopyfields are rendered;ImageandLinkare not used by this component. - The modal is rendered with
data-bs-backdrop="static"anddata-bs-keyboard="false", meaning users cannot dismiss it by clicking outside or pressing Escape — they must click the Close button. - The Trigger rendering parameter controls when the modal appears. The default is
exit(shown when the user’s mouse leaves the viewport, indicating intent to navigate away). Set to0for an immediate trigger on page load. - The Storage rendering parameter controls how the dismissed state is persisted. The default is
localStorage(remembered across sessions). UsesessionStorageto show the modal once per browser session. - The component sets
data-reset-on-close="true"so the message system resets internal state when the dialog is closed. - In Experience Editor the
fadeandmodalCSS classes are omitted so the content is visible inline for editing without needing to trigger the dialog.
Control Properties
Modal
The Modal component renders a Bootstrap 5 dialog overlay built on the Beryllium datasource template. It displays a title in the header, rich-text body content, and a footer with a Close button. The modal uses a static backdrop (data-bs-backdrop="static") so users must interact with the dialog rather than clicking outside to dismiss it. A built-in message trigger system controls when the modal appears (e.g., on page exit or immediately on load) and a storage option remembers whether the user has already dismissed it so it is not shown repeatedly.
| Parameter | Type | Description |
|---|---|---|
| Trigger | Droplink | Controls when the modal is displayed. exit (default) — shown when the user’s cursor leaves the browser viewport. 0 — shown immediately on page load. |
| Storage | Droplink | Controls how the dismissed state is persisted. localStorage (default) — remembers dismissal across browser sessions. sessionStorage — remembers only for the current session. |
| data-testid | Single-Line Text | Sets a data-testid attribute on the modal wrapper for automated testing. |
| Inherited: AddClass | Single-Line Text | Additional CSS classes appended to the modal wrapper div. |
Template Properties
The Modal component uses the Beryllium datasource template. Only Title and Copy are rendered; Image and Link are available on the template but not consumed by this component.
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | The modal header text, rendered inside a <div class="modal-title fs-5">. |
| Copy | Rich Text | The modal body content rendered inside the .modal-body div. Supports full rich-text editing. |
| Image | Image | Available on the Beryllium template but not rendered by the Modal component. |
| Link | General Link | Available on the Beryllium template but not rendered by the Modal component. |