Modal

The modal component is a hidden dialog box that only opens when triggered.

Markup

The modal is comprised of 4 main elements:

  1. The wrapping element, div.cwf-modal, encapsulates all modal pieces and indicates if the modal is visible or hidden using an aria-hidden attribute.
  2. The overlay element, div.cwf-modal__overlay, spans the entirety of the screen when the modal is opened, tints all content under it to make the dialog stand out, and adds or removes the modal from the tabindex using a tabindex attribute.
  3. The close button, button.cwf-modal__close, closes the modal and is always located at the top-right of the viewport.
  4. The dialog box, div.cwf-modal__dialog, contains the content and is the central focal point of the modal.

Javascript

The modal will open when the location hash changes to the ID of the wrapping modal element. This is usually triggered by adding a link to the modal on the page, but may be tapped into using custom JS or other means.

Once the modal is open, it will automatically focus the dialog box. The focus will be trapped within the modal until closed, cycling through the dialog, its focusable elements, and the close button.

There are 3 ways to close the modal:

  1. Clicking the close button.
  2. Clicking anywhere on the overlay outside of the dialog.
  3. Pressing the Escape key.

Example

Etiam malesuada ullamcorper libero et faucibus. In vulputate eu magna eget euismod. Integer accumsan purus gravida, consequat eros at, luctus felis. Praesent ipsum libero, ullamcorper at metus ac, suscipit iaculis orci. Sed ac ligula eleifend, lacinia risus vitae, sollicitudin purus. Donec lobortis consectetur justo ut luctus. Duis consectetur lacus a lectus vulputate, vel bibendum lectus finibus. Maecenas ac dolor euismod, euismod turpis ac, pharetra libero. Proin malesuada efficitur rutrum. Phasellus eros urna, convallis nec ullamcorper eget, bibendum non eros. Nam vulputate dictum nulla a hendrerit. Curabitur facilisis nunc commodo est condimentum, ut congue purus euismod. Aenean ultrices ex odio, nec ullamcorper elit aliquam quis. Curabitur commodo turpis vel sollicitudin venenatis. Cras rhoncus ex in libero porttitor, eu gravida lectus volutpat. Suspendisse malesuada augue eu velit vulputate, rhoncus varius sapien aliquet. Open Modal.