Modals

Modal dialogs use a11y-dialog.

Example HTML, you’d create one of these blocks for every modal.

<div class="dialog-container" id="my-dialog" aria-hidden="true">
    <div class="dialog-overlay" data-a11y-dialog-hide></div>
    <div class="dialog-content" role="document">
        <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">
            &times;
        </button>
        <p>Here is the content!</p>
    </div>
</div>

Call it using JavaScript:

var dialogEl = document.getElementById('my-dialog')
var dialog = new A11yDialog(dialogEl)

dialog.on('show', function (dialogEl, triggerEl) {
  console.log(dialogEl)
  console.log(triggerEl)
})