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.

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

<div class="m-backdrop -closed">
  <div class="m-backdrop__wrapper">
    <section id="modal-1" class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title">Modal Title</h2>
        <button class="a-btn -icon -close" data-dismiss="modal" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn" data-dismiss="modal">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

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

Options

This component accepts options to configure its behavior.

Option	Default	Description
`animated`	`true`	Enables animation on modal display and hide, and fade effect in the backdrop.
`target`	`null`	Lets the developer referer the target programmatically instead of by data-target attribute. It accepts Element object and xpath selector string.

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.