Micro Modal

Download to project

npm install micromodal --save

move to public directory

mv node_modules/micromodal src/js/vendor

Import into project

Enqueue the js

https://unpkg.com/micromodal/dist/micromodal.min.js

Init the js

Add to custom.js

MicroModal.init();

trigger the modal

<a href="#" data-micromodal-trigger="modal-1" class="banner__button">
    Get a Google Ads Health Check
</a>

<!-- [1] -->
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
      
      <header class="modal__header">
        <h2 id="modal-1-title" class = "modal__title">Modal Title</h2>
        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
      </header>

      <main class="modal__content">
                <?php echo do_shortcode('[gravityform id=1 title=false description=false ajax=true tabindex=49]'); ?>
      </main>

      <footer class="modal__footer">
        <button class="button" data-micromodal-close>Close</button>
      </footer>

    </div>
  </div>
</div>

1. This is the outermost container of the modal. It’s job is to toggle the display of the modal. It is important that every modal have a unique id. By default the aria-hidden will be true. Micromodal takes care of toggling the value when required.
2. This is the div which acts as the overlay for the modal. Notice the data-micromodal-close on it. This is a special attribute which indicates that the element that it is on should trigger the close of the modal on click. If we remove that attribute, clicking on the overlay will not close the modal anymore.
3. The role=”dialog” attribute is used to inform assistive technologies that content within is separate from the rest of the page. Additionally, the aria-labelledby=”modal-1-title” attribute points to the id of the modal title. This is to help identify the purpose of the modal.
4. Ensuring that all buttons have a aria-label attribute which defines the action of the button. Notice the data-micromodal-close attribute is used on the button since we want to close the modal on press.

Style the modal

Add styles from