Modals

Javascript dependency

Modal uses remodal plugin /bower_components/remodal/dist/remodal.js
Documentation for remodal: https://github.com/VodkaBears/Remodal

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

Example:

Code:

<article class="modal remodal" data-remodal-id="modal-example" data-remodal-options="hashTracking: false">
  <header class="modal_header">
    <div class="modal_header_headline">
      <h3 class="no-mrg text-ellipsis">Modal header</h3>
    </div>
    <div class="modal_header_action">
      <button class="btn btn-link btn-icon-only" type="button" data-remodal-action="close">
        <i class="icon icon-m">close</i>
      </button>
    </div>
  </header>
  <section class="modal_content">
    ...
  </section>
  <footer class="modal_footer">
    <div class="btn-line pull-right">
      <button class="btn" type="button" data-remodal-action="close">Cancel
      </button>
      <button class="btn btn-primary" type="button" data-remodal-action="confirm">Ok
      </button>
    </div>
  </footer>
</article>

<!-- Large modal -->
<article class="modal modal-l remodal">
  ...
</article>