The aim of this library is to make modal dialogs accessible and easy to include in your project with minimum configuration. It's only ~1.8kb minified and gzipped - A tiny library for big change.
✔ Toggles relevant aria attributes on open and close
✔ Closes modal on overlay click
✔ Closes modal on pressing the
✔ Traps tab focus within the modal
✔ Focuses on the first focusable element within the modal
✔ Retains the focused element state after closing the modal
npm install micromodal --save
yarn add micromodal
via CDN direct link
<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script> <!-- or --> <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
curl -o https://unpkg.com/micromodal/dist/micromodal.min.js
Find the latest changelog here
We are always open and invite developers to contribute to Micromodal. We have kept the guidelines and process dead simple, so you invest more time in making modals accessible to all.
Micromodal follows the standardjs coding standard and is part of our
package.json file. It will help us to maintain consistency in the code base.
- Clone Github repo
$ git clone https://github.com/ghosh/micromodal.git
yarnpackage manager (Read installation guide)
yarn installin the root folder to install all dependencies
yarn devto start a dev server. This serves the example directory and live reloads when any files are changed
- [Optional] Run
yarn buildto build the files for distribution. This is run automatically as a pre-commit hook as well.
- Send us pull request and chill
This project is licensed under MIT license.
- Microtip - Modern, lightweight, accessible css tooltip library. Just 1kb.
You can mention us on Twitter for any questions, suggestions or just send us funny GIF. We
Tweet some love
Tweet about Micromodal and help us to spread the message about the importance of Web accessibility and Inclusive design.
Indrashish Ghosh – @_ighosh
Kalpesh Singh - @knowkalpesh
Contributors - list