Modal element
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.
Modal settings
Modal
- 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
Close button
- 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
- jQuery animation - Set a jQuery animation to be applied when opening and closing the modal.
Modal overlay
- 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
Custom style
- Layout style - Apply a Layout custom style to the modal.
Comments
- Add comments - Add comments to the Element. For more information, see Adding comments to an element.
How to trigger a modal manually
Button and link elements
If you don't want a modal to automatically open and close, you can use a Link
, Button
, Container
, Slide
or Column
element to trigger it.
WYSIWYG
You can also trigger a modal through a WYSIWYG link. For optimal accessibility, this link should point to an alternate location where the modal content can be viewed (should JavaScript be disabled). To connect this with your modal:
- Create your link in the WYSIWYG as per your preferred method.
- Toggle into
Source
mode. - Add
data-modal-open="modal-id"
as an attribute to your link, wheremodal-id
is the id you've given to your modal. - Toggle out of
Source
mode 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.