Modal element

Use the modal element to add an accessible popup dialog to your Layout canvas. 

Important

Focus will return to the body when the modal is closed. If you would like focus to return to your trigger element, the trigger element should have a unique ID added through the markup tab.

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 

Modal element

Use the modal element to add an accessible popup dialog to your Layout canvas. 

Important

Focus will return to the body when the modal is closed. If you would like focus to return to your trigger element, the trigger element should have a unique ID added through the markup tab.

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.

• 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.