Modals

Code Examples

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.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("modal-choice-1", "modal-choice-2", "modal-info-1", etc).

Choice

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

Angular

The Modal component requires a trigger to be set up. It's typically done with a button and a (click) handler.

<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" data-id="modal-choice-1">
  <div class="sprk-o-Stack sprk-o-Stack--large">
    <header class="sprk-o-Stack__item 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 sprk-c-Icon--current-color" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
          <use xlink:href="#close-circle"></use>
        </svg>
      </button>
    </header>

    <div class="sprk-o-Stack__item 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-o-Stack__item">
      <button class="sprk-c-Button sprk-u-mrm">
        Confirm
      </button>

      <button class="sprk-c-Button sprk-c-Button--tertiary" data-sprk-modal-cancel="exampleChoiceModal">
        Cancel
      </button>
    </footer>
  </div>
</div>

<div data-sprk-modal-mask="true" class="sprk-c-ModalMask sprk-u-Display--none" tabindex="-1"></div>
          
<button (click)="toggleChoiceModal($event)" additionalClasses="choice-button" sprkButton>
  Choice Modal
</button>

<sprk-modal [(isVisible)]="false" title="Are you sure?" (hide)="toggleChoiceModal($event)" modalType="choice" idString="modal-choice-1">
  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.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.
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" data-id="modal-info-1">
  <div class="sprk-o-Stack sprk-o-Stack--large">
    <header class="sprk-o-Stack__item 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 sprk-c-Icon--current-color" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
          <use xlink:href="#close-circle"></use>
        </svg>
      </button>
    </header>

    <div class="sprk-o-Stack__item 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>

<div data-sprk-modal-mask="true" class="sprk-c-ModalMask sprk-u-Display--none" tabindex="-1"></div>
          
<button (click)="toggleInfoModal($event)" additionalClasses="info-button" sprkButton>Info Modal</button>

<sprk-modal [(isVisible)]="false" title="For Your Information" (hide)="toggleInfoModal($event)" modalType="info" idString="modal-info-1">
  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-c-Modal--wait 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" data-id="modal-wait-1">
  <div class="sprk-o-Stack sprk-o-Stack--large">
    <header class="sprk-o-Stack__item sprk-c-Modal__header">
      <h2 class="sprk-c-Modal__heading sprk-b-TypeDisplayFive" id="modalWaitHeading">
        Please Wait...
      </h2>
    </header>

    <div class="sprk-o-Stack__item sprk-c-Modal__body sprk-o-Stack sprk-o-Stack--medium">
      <div class="sprk-o-Stack__item sprk-c-Spinner sprk-c-Spinner--circle sprk-c-Spinner--large sprk-c-Spinner--dark"></div>
      <p class="sprk-o-Stack__item sprk-b-TypeBodyTwo" id="modalWaitContent">
        This modal will close shortly for demonstration purposes.
      </p>
    </div>
  </div>
</div>

<div data-sprk-modal-mask="true" class="sprk-c-ModalMask sprk-u-Display--none" tabindex="-1"></div>
          
<button (click)="toggleWaitModal($event)" additionalClasses="wait-button" sprkButton>Wait Modal</button>

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