Modals

Documentation for modal windows and popups.

Files

app/styles/modules/_modals.scss

Modals

Modal window can contain text or any UI controls such as forms, buttons etc. Modal windows retain focus until dismissed or a required action has been taken.

Modal component is complex component containing .modal-overlay as main wrapper .modal as window wrapper and .modal__header, .modal__content and .modal__footer as inner sections of modal window. Modal window component can be created by following HTML structure in example below.

Javascript dependency

Modal component is using Toggle javascript module, to show and hide window.

Note

Larger modal window can be created by using additional class on .modal element .modal-large.

Example:

Code:

<!-- toggle button -->
<button class="btn" type="button" data-toggle="#modal-demo" data-toggle-self="false">Show modal</button>

<!-- modal -->
<div class="modal-overlay active" id="modal-demo">
  <article class="modal">

    <header class="modal__header">
      <div class="modal__header__headline">
        <h3 class="text-nospace">Headline</h3>
      </div>
      <div class="modal__header__action">
        <a class="btn btn--link" data-toggle="#modal-demo">
          ...
        </a>
      </div>
    </header>

    <section class="modal__content">
      ...
    </section>

    <footer class="modal__footer">
      <div class="row btn-layout--horizontal align-items-right">
        <button class="btn btn--small btn--link" type="button" data-toggle="#modal-demo">Cancel</button>
        <button class="btn btn--small btn--link" type="button" data-toggle="#modal-demo">Ok</button>
      </div>
    </footer>

  </article>
</div>

Multiple modals

By default, having two open modals is not allowed. When you try to open a second modal, the first one gets closed automatically. To enable multiple open modals, all modal overlays need [data-modal-allow-multiple] attribute.

Example:

Code:

<!-- toggle button -->
<button class="btn active" type="button" data-toggle="#popup-demo">Show popup</button>

<!-- popup -->
<div class="modal-overlay active" id="popup-demo">
  <article class="modal">

    <header class="modal__header">
      <div class="modal__header__headline">
        <h3 class="text-nospace">Headline</h3>
      </div>
      <div class="modal__header__action">
        <a class="btn btn--link" data-toggle="#popup-demo">
          ...
        </a>
      </div>
    </header>

    <section class="modal__content">
      ...
      <div class="row btn-layout--horizontal align-items-right">
        <button class="btn btn--small btn--link" type="button" data-toggle="#popup-demo">Cancel</button>
        <button class="btn btn--small btn--link" type="button" data-toggle="#popup-demo">Delete</button>
      </div>
    </section>

  </article>
</div>