Micromodal.js inside Webflow

Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript
It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

Following are some of the interactions handled by the library:-

  • Closing modal on overlay click
  • Closing modal on esc button press
  • Toggling aria-hidden attribute on modal
  • Trapping tab focus within the modal
  • Maintaining focus position before and after toggling modal
  • Focusing on the first focusable element within the modal

This is a just a replication of micromodal.js library to be used in Webflow. All css parameters were overwritten by Webflow. Feel free to play with them.

  1. Set data-micromodal-trigger="modal-1" attribute on an element, like a button or link, on whose click you want to show the modal. The value of the attribute, in this case modal-1 should correspond to the id of the modal you want to toggle.
  2. Similarly, you can also define custom close attribute. Example:- <button data-custom-close="modal-1">close</button>
  3. add this script before <body> tag. (cloned page already includes the code)
    <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
    <script>
     MicroModal.init({
       onShow: modal => console.info(`${modal.id} is shown`), // [1]
       onClose: modal => console.info(`${modal.id} is hidden`), // [2]
       openTrigger: 'data-custom-open', // [3]
       closeTrigger: 'data-custom-close', // [4]
       openClass: 'is-open', // [5]
       disableScroll: true, // [6]
       disableFocus: false, // [7]
       awaitOpenAnimation: false, // [8]
       awaitCloseAnimation: false, // [9]
       debugMode: false // [10]
     });
    </script>
  4. Clone <style> code which is in the <head> code of this cloneable. To add custom slide in animation change .micromodal-slide css animation parameters. Avoid using Webflow's interactions, instead refer to https://developer.mozilla.org/en-US/docs/Web/CSS/animation docs.
  5. visit https://micromodal.vercel.app/#configuration for more configuration options.