Modal Utility
Difficulty - Intermediate
The modal utility allows for dialogs to be opened in accessible modal windows. It can be used manually with hard-coded dialog html or within the CMS by converting containers into dialog elements for modal usage.
- Add a container component on the page.
- Open the container properties and add vt-modal to the CSS Class field.
- Next, also add vt-modal-name-* to the CSS Class field, where * is a unique name (example .vt-modal-name-first). This will tell the link/button which dialog to open.
- Add a cta-link component to the page.
- Open the cta-link properties, in the CSS Class field, add the class that you created in Step 2. You may have more than one link triggering the same modal.
Alternatively, inline links may also be used if you manually add the classname (e.g. <a class="vt-modal-name-first" href="...">). Important: if using text-links inside of a text component, you'll need to edit the link's properties in source view or the class attribute will disappear when you finish editing.
The link's destination (href) will be disabled by this utility. It will have no effect and will only open the modal.
Plain Modal
Click anywhere outside to dismiss
Hokie Theme
.vt-modal-theme-hokie
Modals that contain forms have a different dismissal type. To close this modal, click cancel, confirm, or the close button. Forms are not yet fully supported in the modal.
Tip: You can copy and paste the example into your own page to begin editing your own.
When viewing this page in the editor, you can copy and paste the container below onto your own page to use it!
Plain Modal
Copy and paste this container into your own page!
Be sure to change 'someName' to your own unique name in both the container and its trigger.
To track analytics for links/buttons that open modals, target the CSS class a[class*="vt-modal-name"] or button[class*="vt-modal-name"].
Controlling hard-coded dialog elements
This example uses an html component with hard-coded html for the dialog element and its trigger. If using hard-coded html to create the <dialog> element, a few things must already be in place.
Below are examples of raw html of a dialog element and it's trigger. You will also have to use a small bit of javascript to initialize the utility (bottom of this section).
The dialog
<dialog id="ADVANCED_MODAL" class="vt-dialog" closedby="any" aria-modal="true" data-name="ADVANCED" aria-labelledby="MODAL_LABEL" aria-describedby="MODAL_LABEL">
<button class="vt-modal-close" aria-label="Close Test modal dialog" aria-controls="ADVANCED_MODAL">
<span class="sr-only">Close Test modal dialog</span>
</button>
<div id="MODAL_LABEL">
<p>This is a hard-coded modal in an html component!</p>
</div>
</dialog>
<!-- Using capital letter as displayed is NOT recommended -->
- id - DIALOG_ID (required) - Must be the id of the dialog element.
- data-name (required) - This should match the vt-modal-name-* format that your trigger's class will have (e.g. vt-modal-name-first).
- aria-modal (required)
- aria-labelledby (required) - This must be set to some element's id. It can be any element as long as it has an id.
- aria-describedby (required) - This must be set to some element's id. It can be any element as long as it has an id. It does not have to be the same element as the aria-labelledby.
- class - vt-dialog (optional) - only necessary if using the default styles.
- closedby (semi-optional) - the utility will assume this to be 'any' unless you change it manually when calling on the utility.
The close button element (required)
- aria-controls (required) - This must match the dialog's id.
- class - vt-modal-close (required)
The label element (optional)
- id (semi-optional) - NOTE: the dialog's aria-labelledby or aria-describedby must reference some other element that has an id. It can be an element anywhere on the page. In this case, it is an element inside of the dialog.
The trigger
<a class="vt-modal-name-ADVANCED" href="#" aria-label="Open Modal" aria-haspopup="true" aria-controls="ADVANCED_MODAL">Open Modal with label</a>
- aria-haspopup (required for accessibility)
- aria-controls (required) - This must match the dialog's id.
- class - vt-modal-name-* (required) - This must match the dialog's name.
- class - vt-modal-ctalink (optional) - only necessary if using the default styles (ctalinks only)
The javascript
Your html component should contain something like this code below:
<script>
$(function() {
new Modal( document.getElementById("ADVANCED_MODAL") );
});
</script>
Currently, there is no way to trigger hard-coded modals with a CTA links.