Use the modal element to add an accessible popup dialog to your Layout canvas.
Locating the modal element
To locate the Modal element:
- Navigate to a page or template with the Layout canvas
- Click the + button on the Layout canvas
- Within the Elements tab, look for the Modal element.
- ID - Set the ID of the modal, this should be unique
- Position - Set the position of the modal on the page
- Layout style - Set the layout style of the modal dialog
- Auto open - Set the modal to auto open
- Delay auto open (ms) - Add a delay in milliseconds to the modal auto opening
- Auto close - Set the modal to auto close
- Delay auto close (ms) - Add a delay in milliseconds to the modal auto closing
- Show close button - Set to show a close button on the modal
- Button text - Set the close button text
- Button style - Set a button style for the close button
- Position outside - Set to position the close button outside of the modal content
- Position - Set the position of the close button
- jQuery animation - Set a jQuery animation to be applied when opening and closing the modal.
- Show overlay - Set to show an overlay behind the modal when open
- Click to close - Set to allow clicking on the page to close the modal
- Layout style - Set a Layout style for the overlay
- Layout style - Apply a Layout custom style to the modal.
- Add comments - Add comments to the Element. For more information, see Adding comments to an element.
If you don't want a modal to automatically open and close, you can use a
Column element to trigger it.
- Create your link in the WYSIWYG as per your preferred method.
- Toggle into
data-modal-open="modal-id"as an attribute to your link, where
modal-idis the id you've given to your modal.
- Toggle out of
Sourcemode and save your changes.
You many need to add
data-modal-open as an allowed HTML attribute to your text format settings for this to work.