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:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Modal element.

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:

1. Create your link in the WYSIWYG as per your preferred method.
2. Toggle into Source mode.
3. Add data-modal-open="modal-id" as an attribute to your link, where modal-id is the id you've given to your modal.
4. Toggle out of Source mode and save your changes.