Modal Beta
A default modal dialogue box with the option for light dimissal.
A modal dialog can have up to three content areas: a header, a content area, and a footer. Content should be placed in the content area by default. You can add a header and a footer if needed.
Configuration #
| Property | Default value | Description |
|---|---|---|
--modal-max-width | var(–content-max-width) | Sets the maximum width of the modal minus some padding to the side. |
To prevent interaction with elements behind the modal, modals should be opened with the showModal() function. Add the light dismissal behaviour by adding the closedBy attribute to the dialog element.
Requiring user action #
Modal sizing #
| Variants | Description |
|---|---|
data-modal-size="wrapper" | Sets the maximum width of the modal to the width of the wrapper. |
Modal alignment #
| Variants | Description |
|---|---|
data-modal-alignment="top" | Sticks the modal to the top of the screen. |
data-modal-alignment="bottom" | Sticks the modal to the bottom of the screen. |
Modals with promotional content #
These examples show how existing promotions can be implemented with this component.