Modal

Use the function chi.modal(elem) to instantiate a new modal component in the DOM element passed as a parameter. You must use the trigger element as the parameter.

To activate a modal set data-target="#id" to select a modal by id on a controller element, like a button. To easily close a modal set data-dismiss="modal" on a controller element, like a button, inside the modal or will also close by pressing the escape key.

Base

<button id="modal-trigger-1" class="a-btn a-modal__trigger" data-target="#modal-1">
  Launch demo modal
</button>

<div class="a-backdrop -closed">
  <div id="modal-1" class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title">Modal Title</h3>
      <button class="a-btn -icon -close" data-dismiss="modal">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m--0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn" data-dismiss="modal">Cancel</button>
      <button class="a-btn -primary -ml--2">Save</button>
    </div>
  </div>
</div>

<script>chi.modal(document.getElementById('modal-trigger-1'));</script>

Options

This component accepts options to configure its behavior.

Preventing memory leaks

Modal components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('modal-1');
var modal = chi.modal(elem);
// do stuff
modal.dispose();

TipIt is safe to call the modal method more than once, as it will return any previously created modal component associated to the trigger.

var elem = document.getElementById('modal-1');
var modal = chi.modal(elem);
var elem2 = document.getElementById('modal-1');
var modal2 = chi.modal(elem2);
modal === modal2; // returns true

modal.dispose(); // Only have to do it once.