Modals

Spark-Core

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.

Angular

The Modal component in spark-core-angular consists of two Angular components:

sprk-modal
sprk-button

<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>

<sprk-button (click)="toggleChoiceModal($event)" additionalClasses="choice-button">
  Choice Modal
</sprk-button>

<sprk-modal [(isVisible)]="false" title="Are you sure?" (hide)="toggleChoiceModal($event)" modalType="choice">
  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.
</sprk-modal>

Information

See below for available customization options:

Input	Type	Description
modaltype	string	This determines the variation of the Modal that is rendered. Can be 'choice', 'info', or 'wait'.
confirmText	string	The value supplied will be rendered as the text for the confirm button.
cancelText	string	The value supplied will be rendered as the text for the cancel link.
confirmAnalyticsString	string	The value supplied will be assigned to the 'data-analytics' attribute on the confirm button. Intended for an outside library to capture data.
isVisible	boolean	If true, the modal will be shown. If false, the modal will not be shown.
hide	function	When the modal is closed the hide event is emitted and a callback function can be triggered if supplied to hide.
confirmClick	function	Available when the modal type is 'choice'. The modal will emit a confirm click event when the confirmation button is clicked. A callback function can be triggered if supplied to confirmClick.
cancelClick	function	Available when the modal type is 'choice'. The modal will emit a cancel click event when the cancel link is clicked. A callback function can be triggered if supplied to cancelClick.

Info

An Info Modal shows information to the user.

Angular

To use the info modal set modalType to 'info'.

<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>

<sprk-button (click)="toggleInfoModal($event)" additionalClasses="info-button">Info Modal</sprk-button>

<sprk-modal [(isVisible)]="false" title="For Your Information" (hide)="toggleInfoModal($event)" modalType="info">
  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.
</sprk-modal>

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.

Angular

To use the info modal set modalType to 'wait'.

<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>

<sprk-button (click)="toggleWaitModal($event)" additionalClasses="wait-button">Wait Modal</sprk-button>

<sprk-modal [(isVisible)]="false" title="Please wait..." (hide)="toggleWaitModal($event)" modalType="wait">
  This type of modal can't be closed by the user but will close shortly for demonstration purposes.
</sprk-modal>

Getting Started

Fundamentals

Components

Utilities

Documentation

Information

Restrictions

Choice

Angular

Information

Info

Angular

Wait

Angular