Modals

The Modal component is a dialog box that is displayed on top of all site content. When a Modal is present, the rest of the site is inactive and covered by a mask. Use a Modal when you need the user to make a choice, or you need to present important information based on an action they took, or when you need to indicate something is happening. Modals are triggered by an action, usually, a form submit.

Information

  • When a Modal is open, the user can hit the "Escape" key, click the cancel element, the close icon, or click the outside mask to close the Modal (unless the Modal type is "Wait").
  • If you would like to use your own Modal JS instead of the Spark JS you should omit the required data attributes as seen in the code blocks below.
  • The Modal and mask elements are hidden by default.
  • If the content in the Modal is too large for the viewport then the Modal will show a scroll bar.
  • When the Modal is opened, the first focusable element inside the Modal will receive focus.
  • When the Modal is closed, focus will be returned to the Modal's trigger button.
  • When the Modal is open, focus is trapped inside the Modal when a user presses the Tab or Shift+Tab keys.
  • When the Modal is open we tell assistive devices that everything behind it is inactive by adding aria-hidden="true" on the main site container (data-sprk-main) and removing it once the Modal is closed.

Restrictions

  • Each Modal must have an unique identifier that is used for all data attributes related to that specific Modal. For example, data-sprk-modal="uniqueID" and data-sprk-modal-cancel="uniqueID".
  • Modal container HTML must be added right above the closing body tag and be outside of the main site content container.
  • The main content container of your site must have the attribute of 'data-sprk-main'.
  • The trigger element should always be outside the Modal container.
  • No more than one Modal should be open at a time.
  • Content length inside the Modal shouldn't exceed a reasonable amount.

Choice

A Choice Modal poses a question to the user and allows them to take an action.

<button class="sprk-c-Button" data-sprk-modal-trigger="exampleChoiceModal" type="button">
  Open Choice Modal
</button>

<div class="sprk-c-Modal sprk-u-Display--none" role="dialog" tabindex="-1" aria-labelledby="modalChoiceHeading" aria-modal="true" aria-describedby="modalChoiceContent" data-sprk-modal="exampleChoiceModal">
  <header class="sprk-c-Modal__header">
    <h2 class="sprk-c-Modal__heading sprk-b-TypeDisplayFive" id="modalChoiceHeading">
      Are you sure?
    </h2>

    <button class="sprk-c-Modal__icon" data-sprk-modal-cancel="exampleChoiceModal" type="button" aria-label="Close Modal">
      <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 384 512" aria-hidden="true" focusable="false">
        <use xlink:href="#times"></use>
      </svg>
    </button>
  </header>

  <div class="sprk-c-Modal__body">
    <p class="sprk-b-TypeBodyTwo" id="modalChoiceContent">
      This is some content that is in a modal. It explains what the modal is for. There will also be a way to close the modal.
    </p>
  </div>

  <footer class="sprk-c-Modal__footer">
    <button class="sprk-c-Button sprk-u-mrm">
      Confirm
    </button>

    <a href="" class="sprk-b-Link sprk-b-Link--standalone" data-sprk-modal-cancel="exampleChoiceModal">
      Cancel
    </a>
  </footer>
</div>

<div data-sprk-modal-mask="true" class="sprk-c-ModalMask sprk-u-Display--none" tabindex="-1"></div>

Info

An Info Modal shows information to the user.

<button class="sprk-c-Button" data-sprk-modal-trigger="exampleInfoModal" type="button">
  Open Info Modal
</button>

<div class="sprk-c-Modal sprk-u-Display--none" role="dialog" tabindex="-1" aria-labelledby="modalInfoHeading" aria-modal="true" aria-describedby="modalInfoContent" data-sprk-modal="exampleInfoModal">
  <header class="sprk-c-Modal__header">
    <h2 class="sprk-c-Modal__heading sprk-b-TypeDisplayFive" id="modalInfoHeading">
      Info Modal
    </h2>

    <button class="sprk-c-Modal__icon" data-sprk-modal-cancel="exampleInfoModal" type="button" aria-label="Close Modal">
      <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 384 512" aria-hidden="true" focusable="false">
        <use xlink:href="#times"></use>
      </svg>
    </button>
  </header>

  <div class="sprk-c-Modal__body">
    <p class="sprk-b-TypeBodyTwo" id="modalInfoContent">
      This is some content that is in a Modal. It explains what the Modal is for. There will also be a way to close the modal.
    </p>
  </div>
</div>

<div data-sprk-modal-mask="true" class="sprk-c-ModalMask sprk-u-Display--none" tabindex="-1"></div>

Wait

Wait Modals contain a spinner to indicate something is happening and can not be closed by the user. Wait Modal containers need the additional 'data-sprk-modal-type="wait"' HTML attribute.

<button class="sprk-c-Button" data-sprk-modal-trigger="exampleWaitModal" type="button">
  Open Wait Modal
</button>

<div class="sprk-c-Modal sprk-u-Display--none" role="dialog" tabindex="-1" aria-labelledby="modalWaitHeading" aria-modal="true" aria-describedby="modalWaitContent" data-sprk-modal="exampleWaitModal" data-sprk-modal-type="wait">
  <header class="sprk-c-Modal__header">
    <h2 class="sprk-c-Modal__heading sprk-b-TypeDisplayFive" id="modalWaitHeading">
      Please Wait...
    </h2>

    <div class="sprk-c-Modal__icon">
      <div class="sprk-c-Spinner sprk-c-Spinner--circle sprk-c-Spinner--large"></div>
    </div>
  </header>

  <div class="sprk-c-Modal__body">
    <p class="sprk-b-TypeBodyTwo" id="modalWaitContent">
      This type of modal can't be closed by the user but will close shortly for demonstration purposes.
    </p>
  </div>
</div>

<div data-sprk-modal-mask="true" class="sprk-c-ModalMask sprk-u-Display--none" tabindex="-1"></div>