Modals

Modal windows are secondary content areas that allow a user to focus on a subtask without leaving the context of the current screen. They are displayed on top of the current screen and may contain a variety of content types.

Simple Modal Example


When to Use

  • Use to alert, instruct, or assist the user in performing a specific task or to capture secondary information related to form elements on the primary page.
  • Use when the action does not require its own page to complete.
  • Use when there is a need for the user to focus on a specific action or message.

When Not to Use

  • Do not use a modal as a popover; the background shading should overlay the entire screen.
  • Modals are not recommended for complicated multi-step processes.
  • A modal should never appear within another modal. If a secondary action is needed within a modal, use the popover pattern.

Variations

Display & Interactions

Modals should appear in the center of the screen while masking the surrounding background.

Include a clear title that matches text link, icon or button used to access the modal. This may be excluded if the content is extremely concise (an error message, for example).

The modal should close when the user clicks the close icon in the upper right or clicks anywhere outside the modal window. A cancel button may also be used for more complex tasks. In complex tasks, consider using messaging to confirm the user’s intent when the user selects a close action or clicks outside of the modal. This will ensure that data is not lost by an unintended action.

Modals should span a minimum of 4 columns and a maximum of 10. This allows the user to always see the current page and maintain context of where they are in the application.

Modals should not exceed the height of the viewable space. If the content exceeds this height, consider separating the content into its own page or simplifying the content into smaller steps. If this is not possible, a scroll bar should appear. In this scenario, a fixed footer containing the actions may also be used.

Buttons

Limit the number of buttons appearing in a modal and consider using a single primary button, since the close icon can perform the close/cancel task simultaneously.

When including more than one button, position the buttons according to the guidelines in the Buttons component.

Variations

Critical Action Modal Example


Simple Form in Modal Example


Locked Buttons Modal Example


Developer Notes

Simple Modal


<button data-modal="#simpleModal" class="spark-btn spark-btn--md">Open Modal</button>

<div class="spark-modal" id="simpleModal">

  <div class="spark-modal__scroll">

    <div class="spark-modal__content col-xs-12 col-sm-10 col-md-6 col-xl-4">

      <div class="spark-modal__body">

        <a class="spark-modal__close spark-icon-close" title="Close Modal"></a>

        <h4>Modal Title</h4>

        <p>
          Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.
        </p>

        <nav class="spark-btn-group">
          <button class="spark-btn spark-btn--md spark-btn--secondary spark-btn-group-secondary">Secondary</button>
          <button class="spark-btn spark-btn--md spark-btn-group-primary">Primary</button>
        </nav>

      </div>

    </div>

  </div>

</div>
// Vanilla JS - Option 1
var el = document.querySelector('[data-modal]');
var modalInstance = new Spark.Modal(el);

// Vanilla JS - Option 2
var el = document.querySelector('.spark-modal');
var modalInstance = new Spark.Modal(el);


// jQuery - Option 1
$('[data-modal]').sparkModal();

// jQuery - Option 2
$('.spark-modal').sparkModal();

A modal consists of two parts: the content and the button(s) which trigger opening the modal overlay. Modal element should be given a class of .spark-modal. Inside of this outermost element should be an element with a class of .spark-modal__scroll. This ensures that the modal is both centered and scrollable if its content does not fit entirely on the screen.

Inside of this should be an element with a class of .spark-modal__content. Use the grid classes to size this element appropriately. Inside of this content container you should add a close button with a class of .spark-modal__close. Clicking on this element or outside of the content area will hide the modal.

Any actionable buttons should be placed inside of an element with a class of .spark-modal__nav. The will be right-aligned on desktop and justified on mobile.

Use of the modal requires a javascript helper. It can be instantiated using new Spark.Modal(el) or $(el).sparkModal(). When creating the modal, there are two options for which element to pass: a clickable element that references a modal through a [data-modal] attribute, or an element with the .spark-modal class.

You may programmatically call the open and close methods to toggle the visibility of the modal. If a modal is created without using a clickable element, these methods will be the only way to open the modal.

Error Messaging


<button data-modal="#messageModal" class="spark-btn spark-btn--md">Open Message Modal</button>

<div class="spark-modal" id="messageModal">

  <div class="spark-modal__scroll">

    <div class="spark-modal__content col-xs-12 col-sm-10 col-md-7 col-lg-6 col-xl-5">

      <div class="spark-modal__body">

        <a class="spark-modal__close spark-icon-close" title="Close Modal"></a>

        <div class="spark-message spark-message--lg spark-message--error spark-margin-bottom">
          <i class="spark-message__icon spark-icon-trash spark-icon--fill"></i>
          <div class="spark-message__content">
            <h4 class="spark-message__heading">
              Are you sure you want to delete this item?
            </h4>
            <p>
              Some message to explain the consequences in further detail.
            </p>
          </div>
        </div>

        <nav class="spark-btn-group spark-margin-top--lg">
          <button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss spark-btn-group-secondary">No</button>
          <button class="spark-btn spark-btn--md spark-btn-group-primary">Yes, I am sure</button>
        </nav>

      </div>

    </div>

  </div>

</div>
// Vanilla JS
var el = document.querySelector('.spark-modal');
var modalInstance = new Spark.Modal(el);

// jQuery
$('.spark-modal').sparkModal();

Simply add an instance of the Message Component to include an error, info or warning message in a modal.

Simple Form in Modal


<button data-modal="#singleFormModal" class="spark-btn spark-btn--md">Open Modal Form</button>

<div class="spark-modal" id="singleFormModal">

  <div class="spark-modal__scroll">

    <form class="spark-modal__content col-xs-12 col-sm-10 col-md-7 col-lg-6 col-xl-5" name="single-form">

      <div class="spark-modal__body">

        <a class="spark-modal__close spark-icon-close" title="Close Modal"></a>

        <h4>Save Scenario</h4>

        <fieldset class="row">
          <label class="col-xs-12 spark-radio">
            <input class="spark-radio__input" type="radio" name="single-form-radio" checked>
            <span class="spark-radio__box"></span>
            <span class="spark-label">Save</span>
          </label>
          <label class="col-xs-12 spark-margin-top spark-radio">
            <input class="spark-radio__input" type="radio" name="single-form-radio">
            <span class="spark-radio__box"></span>
            <span class="spark-label">Create a new scenario</span>
          </label>
          <label class="col-xs-12 spark-margin-top spark-radio">
            <input class="spark-radio__input" type="radio" name="single-form-radio" value="existing-scenario">
            <span class="spark-radio__box"></span>
            <span class="spark-label">Add to an existing scenario</span>
          </label>
        </fieldset>

        <div class="spark-margin-top spark-margin-bottom--lg row">
          <div class="col-xs-12 col-md-6">
            <label class="spark-select">
              <select class="spark-select__input" disabled name="single-form-select">
                <option></option>
                <option>Scenario A</option>
                <option>Scenario B</option>
                <option>Scenario C</option>
              </select>
              <span class="spark-label">Selection Option</span>
            </label>
          </div>
        </div>

        <nav class="spark-btn-group">
          <button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss spark-btn-group-secondary">Cancel</button>
          <button class="spark-btn spark-btn--md spark-btn-group-primary" onclick="return false;">Save</button>
        </nav>

      </div>

    </form>

  </div>

</div>
// Vanilla JS
var el = document.querySelector('.spark-modal');
var modalInstance = new Spark.Modal(el);

// jQuery
$('.spark-modal').sparkModal();

Complex Form in Modal with Locked Buttons


<button data-modal="#multipleAccordianModal" class="spark-btn spark-btn--md">Open Complex Modal</button>

<div class="spark-modal spark-modal--fullscreen-xs" id="multipleAccordianModal">

  <div class="spark-modal__scroll">

    <form class="spark-modal__content col-xs-12 col-sm-10 col-lg-8 col-xl-6" name="multiple-form-w-accordians">

      <div class="spark-modal__header">
        <a class="spark-modal__close spark-icon-close" title="Close Modal"></a>
        <h4>Add Checked Bags</h4>
      </div>

      <div class="spark-modal__body spark-modal__body--snug-bottom">

        <p>
          Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
        </p>

        <div class="spark-panel-group spark-modal__full-width-content">

          <div class="spark-panel--expand">
            <div class="spark-panel__header spark-panel__header--flex spark-align-items-center" role="heading">
              <div class="col-xs-4 col-sm-3 spark-caps">2 Bags</div>
              <div class="col-xs-4 col-sm-4 spark-serif">Sarah Johnson</div>
              <div class="col-xs-4 col-sm-5 spark-success spark-bold spark-text-right">+$25.00</div>
            </div>
            <div class="spark-inset-content spark-panel__content">

              <p class="spark-bold spark-info spark-margin-bottom">
                Congratulations! You qualify for 1 free bag.
              </p>

              <div class="spark-input-group spark-center-items spark-margin-bottom--lg">
                <div class="spark-number-selector">
                  <button class="spark-btn spark-btn--secondary spark-number-selector__down"></button>
                  <input type="number" min="0" max="3" value="2">
                  <button class="spark-btn spark-btn--secondary spark-number-selector__up"></button>
                </div>
                <span class="spark-margin-left">Bag Total</span>
              </div>

              <div class="row">

                <fieldset class="spark-fieldset col-xs-12 col-md-6">
                  <div class="spark-caps spark-margin-bottom--sm">
                    <i class="spark-icon-suitcase spark-icon--md spark-margin-right--sm spark-align-top"></i><span class="spark-line-height-3">Bag 1:</span>
                  </div>
                  <div class="spark-radio-group">
                    <label class="spark-radio spark-margin-bottom--sm">
                      <input class="spark-radio__input" type="radio" name="test-radio" value="">
                      <span class="spark-radio__box"></span>
                      <span class="spark-label"><strong class="spark-label__highlight">Free</strong> <span class="spark-margin-left--sm">0-50 lb / 0-23 kg</span></span>
                    </label>
                    <br>
                    <label class="spark-radio spark-margin-bottom--sm">
                      <input class="spark-radio__input" type="radio" name="test-radio" value="" checked>
                      <span class="spark-radio__box"></span>
                      <span class="spark-label"><strong class="spark-label__highlight">Free</strong> <span class="spark-margin-left--sm">50-99lb / 24-45 kg</span></span>
                    </label>
                  </div>
                </fieldset>

                <fieldset class="spark-fieldset col-xs-12 col-md-6">
                  <div class="spark-caps spark-margin-bottom--sm">
                    <i class="spark-icon-suitcase spark-icon--md spark-margin-right--sm spark-align-top"></i><span class="spark-line-height-3">Bag 2:</span>
                  </div>
                  <div class="spark-radio-group">
                    <label class="spark-radio spark-margin-bottom--sm">
                      <input class="spark-radio__input" type="radio" name="test-radio2" value="" checked>
                      <span class="spark-radio__box"></span>
                      <span class="spark-label"><strong class="spark-label__highlight">$25.00</strong> <span class="spark-margin-left--sm">0-50 lb / 0-23 kg</span></span>
                    </label>
                    <br>
                    <label class="spark-radio spark-margin-bottom--sm">
                      <input class="spark-radio__input" type="radio" name="test-radio2" value="">
                      <span class="spark-radio__box"></span>
                      <span class="spark-label"><strong class="spark-label__highlight">$35.00</strong> <span class="spark-margin-left--sm">50-99lb / 24-45 kg</span></span>
                    </label>
                  </div>
                </fieldset>

              </div>

              <div class="row spark-margin-top--lg">
                <div class="col-xs-12 spark-caps">Passenger Total</div>
                <div class="col-xs-12 spark-success spark-bold spark-epsilon">$25.00</div>
              </div>

            </div>
          </div>

          <div class="spark-panel--expand">
            <div class="spark-panel__header spark-panel__header--flex spark-align-items-center" role="heading">
              <div class="col-xs-4 col-sm-3 spark-caps">1 Bag</div>
              <div class="col-xs-4 col-sm-4 spark-serif">Robert A. Johnson</div>
              <div class="col-xs-4 col-sm-5 spark-caps spark-success spark-bold spark-text-right">Free</div>
            </div>
            <div class="spark-inset-content spark-panel__content">

              <p class="spark-bold spark-info spark-margin-bottom">
                Congratulations! You qualify for 1 free bag.
              </p>

              <div class="spark-input-group spark-center-items spark-margin-bottom--lg">
                <div class="spark-number-selector">
                  <button class="spark-btn spark-btn--secondary spark-number-selector__down"></button>
                  <input type="number" min="0" max="3" value="1">
                  <button class="spark-btn spark-btn--secondary spark-number-selector__up"></button>
                </div>
                <span class="spark-margin-left">Bag Total</span>
              </div>

              <div class="row">

                <fieldset class="spark-fieldset col-xs-12 col-md-6">
                  <div class="spark-caps spark-margin-bottom--sm">
                    <i class="spark-icon-suitcase spark-icon--md spark-margin-right--sm spark-align-top"></i><span class="spark-line-height-3">Bag 1:</span>
                  </div>
                  <div class="spark-radio-group">
                    <label class="spark-radio spark-margin-bottom--sm">
                      <input class="spark-radio__input" type="radio" name="test-radio3" value="">
                      <span class="spark-radio__box"></span>
                      <span class="spark-label"><strong class="spark-label__highlight">Free</strong> <span class="spark-margin-left--sm">0-50 lb / 0-23 kg</span></span>
                    </label>
                    <br>
                    <label class="spark-radio spark-margin-bottom--sm">
                      <input class="spark-radio__input" type="radio" name="test-radio3" value="" checked>
                      <span class="spark-radio__box"></span>
                      <span class="spark-label"><strong class="spark-label__highlight">Free</strong> <span class="spark-margin-left--sm">50-99lb / 24-45 kg</span></span>
                    </label>
                  </div>
                </fieldset>

              </div>

              <div class="row spark-margin-top--lg">
                <div class="col-xs-12 spark-caps">Passenger Total</div>
                <div class="col-xs-12 spark-caps spark-success spark-bold spark-epsilon">Free</div>
              </div>

            </div>
          </div>

        </div>

      </div>

      <div class="spark-modal__footer container">

        <div class="row spark-flex--gte-xs spark-margin-bottom">
          <div class="col-xs-6"><strong>Total:</strong> 3 Bags</div>
          <div class="col-xs-6 spark-bold spark-text-right"><span class="spark-success">$25.00</span> <small>+ tax</small></div>
        </div>

        <nav class="spark-btn-group">
          <button class="spark-btn spark-btn--md spark-btn--secondary spark-btn-group-secondary" onclick="return false;">Save</button>
          <button class="spark-btn spark-btn--md spark-btn-group-primary" onclick="return false;">Search</button>
        </nav>

      </div>

    </form>

  </div>

</div>
// Vanilla JS
var el = document.querySelector('.spark-modal');
var modalInstance = new Spark.Modal(el);

// jQuery
$('.spark-modal').sparkModal();

For more complex modals the header, body and footer content should be separated. This allows for the header and footer to be locked to the top and bottom of the page on small screens. Add a header by using the class .spark-modal__header, and a footer using the class .spark-modal__footer.

Although there is padding on the modal body content by default, use the .spark-modal__full-width-content class to have a block align to both edges of the modal window.

Modal Title

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.

Are you sure you want to delete this item?

Some message to explain the consequences in further detail.

Save Scenario

Add Checked Bags

Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

2 Bags
Sarah Johnson
+$25.00

Congratulations! You qualify for 1 free bag.

Bag Total
Bag 1:

Bag 2:

Passenger Total
$25.00
1 Bag
Robert A. Johnson
Free

Congratulations! You qualify for 1 free bag.

Bag Total
Bag 1:

Passenger Total
Free
Total: 3 Bags
$25.00 + tax