Menu

Component: Modal

<button type="button" class="btn bg-main-color triggerOpenModal" data-modal="modal-1" aria-controls="modal-1">Click</button>

This is the trigger of a modal. It must have .trigger-modal class and data-modal="XX".
data attribute must be the same on the trigger and on the modal.

<div class="page-modals" id="pageModals" tabindex="-1" role="dialog" aria-hidden="true"></div>

This is the modals wrapper.

<div class="box-modal" data-modal="modal-1" role="document">
  <div class="box-modal-header">
    <h4>Modal</h4>
    <button type="button" class="triggerCloseModal"><i class="fa fa-times"></i></button>
  </div>
  <div class="box-modal-content">...</div>
  <div class="box-modal-footer">...</div>
</div>

This is the markup for a single modal. This markup must be inside the <div class="page-modals"></div>, check the example below.

<button type="button" class="btn bg-main-color triggerOpenModal" data-modal="modal-1" aria-controls="modal-1">Click</button>

<div class="page-modals" id="pageModals" tabindex="-1" role="dialog" aria-hidden="true">
  <div id="pageModalsOverlayer"></div>
  <div class="box-modal" data-modal="modal-1" role="document">
    <div class="box-modal-header">
      <h4>Modal</h4>
      <button type="button" class="triggerCloseModal"><i class="fa fa-times"></i></button>
    </div>
    <div class="box-modal-content">...</div>
    <div class="box-modal-footer">...</div>
  </div>
</div>

Above the full markup to build a modal. Each modal must have the same data-modal than his trigger.