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.
- 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.
- Similarly, you can also define custom close attribute. Example:- <button data-custom-close="modal-1">close</button>
- 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> - 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.
- visit https://micromodal.vercel.app/#configuration for more configuration options.