Modals

Documentation for modal windows and popups.

Files

app/styles/components/modals/config.scss
app/styles/components/modals/style.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="bar">
        <div class="bar__item bar__item--fill">
          <h4 class="text-nospace">Headline</h4>
        </div>
        <div class="bar__item">
          <button class="btn btn--link modal__close-button" data-toggle="#modal-demo">
            ...
          </button>
        </div>
      </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>

Modal body

To accomodate larger amout of content, sometimes scrolling inside the modal is necessary. Use .modal__body to wrap sections you want to scroll, when they don't fit.

Use this container wisely, as it might crop off your dropdowns and selects

Example:
Code:
<div class="modal-overlay active" id="modal-demo">
  <article class="modal">

    <header class="modal__header">
      ...
    </header>

    <div class="modal__body">
      <section class="modal__content">
        // Lots of content here
      </section>
    </div>

    <footer class="modal__footer">
      ...
    </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="bar">
        <div class="bar__item bar__item--fine">
          <h4 class="text-nospace">Headline</h4>
        </div>
        <div class="bar__item">
          <button class="btn btn--link" data-toggle="#popup-demo">
            ...
          </button>
        </div>
      </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>