Component

Modal

SCSS Location: /styles/scss/partial/_modal-custom.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

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.
Content Modal Confirmation Modal Video Modal