Trigger Type: On-Click
1. To make the modal window open with the link, ensure your link has this exact displayOverlay in it like so:
<a href="/content/aarpe/en/home.html" target="_blank" data-displayoverlay="displayOverlay">
Modals
A modal prevents interaction with page content until the user completes an action or dismisses the modal. This intentionally interrupts the user’s workflow. Use modals sparingly to minimize unnecessary disruptions. Modals should have a simple headline that explains its purpose. Use descriptive text to be clear what the user needs to do and why. Avoid using modals to display complex forms or large amounts of information.
Lorem ipsum. Open this link for modal test. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. To make the modal window open with a button, ensure the data attribute field has the exact text, 'modal-id-uxdia-c-leaving-modal' in it.
3. To bind it to the actual modal window's container, ensure the container has the Style's Display Type selected as 'Leaving Modal' in the dropdown, any ID text, such as 'test-modal'
You can resize this modal's container to be any width. My example is 5 columns wide.
Test Modal Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Training
Coming soon.