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.
Modal content
<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>
This component accepts options to configure its behavior.
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.