The modal component provides a modal that can be launched with a button or on page load. The modal components is a container for content that is placed within its drop zone.
Key information about this component:
Layout canvas elements
- Modal open button - This is the button used to open the modal. It will not show if the modal is set to open automatically. When you place the modal component into a page layout, the Modal open button is what you are placing.
- Modal - This is the modal window that opens. It will open above the content on the page and is absolutely positioned.
- Container-content-wrapper - This contains the content placed within the modal and allows it to scroll vertically if the height of the content is greater than the height of the modal.
- Drop zone - Drop zone for modal content.
Component form fields
- Auto open modal - Toggles the modal trigger between on click and on page load.
- Open button ID - Sets the ID of the modal trigger button. The button must be given an ID that is unique to the page. The ID is required to provide focus to the button when the modal is closed. This is an accessibility requirement. The ID should be formed from letters, numbers and hyphens and not include spaces. For example, modal-one-button.
- Open button text - Sets the text to display on the button that will open the modal.
- Open button style - Sets the style of the button.
- Modal window ID - Sets the ID of the modal window. The modal window must be given an ID that is unique to the page. The ID is required for the button to target the modal when clicked. The ID should be formed from letters, numbers and hyphens and not include spaces. For example, modal-one.
- Modal size - Sets the size of the modal window.
- Modal background color - Sets the background color of the modal window.
- Close button style - Sets the style of the button used to close the modal.
Site Studio