Modal

Description

A Simple Accessible Modal treatment for displaying additional content in a floating window.

Guidelines

Include a modal headline and supporting copy to clearly describe the modal’s purpose

Usage

• Universal Form Modals come in two varieties: graphical and photographic. Use either the lead-modal__wrapper--graphical or lead-modal__wrapper--photographic modifier to style the modal.
• The CMS has three ways of implementing the trigger and modal pairs: section, unique, and hero.
• Section:
  • The trigger and modal form are added all at once in the CMS and rendered as siblings in the markup.
  • The trigger button should have the data-universal-modal-form-trigger="section" attribute.
  • The trigger button will have its data-endpoint-url attribute rendered in preprocessing.
  • The modal should have the data-lead-modal="section" attribute.
• Unique:
  • The trigger and modal form are added separately in the CMS and many triggers can correspond to one modal form.
  • The trigger button should have the data-universal-modal-form-trigger="unique" attribute.
  • The trigger button will have a CMS-generated data-universal-modal-form-id attribute that must match the ID added to the corresponding modal form.
  • Each trigger button will have its data-endpoint-url attribute value added by JavaScript after the page is rendered, based on the Pardot Endpoint URL hidden field in the form.
  • The modal should have the data-lead-modal="unique" attribute and a unique ID that matches each trigger button it should be associated with.
• Hero:
  • The trigger button is optionally added as part of a Universal Modal Hero.
  • The trigger button should have the data-universal-modal-form-trigger="hero" attribute.
  • The modal should have the data-lead-modal="hero" attribute.
  • The trigger button will have its data-endpoint-url attribute value added by JavaScript after the page is rendered, based on the Pardot Endpoint URL hidden field of the Universal Modal Hero form.