Tiny, dependency-free javascript library for creating accessible modal dialogs
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 esc
key
✔ Traps tab focus within the modal
✔ Focuses on the first focusable element within the modal
✔ Retains the focused element state after closing the modal
via npm
npm install micromodal --save
via yarn
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>
direct download
curl -O -L https://unpkg.com/micromodal/dist/micromodal.min.js
Please use this pollyfill suggested here.
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.
$ git clone https://github.com/ghosh/micromodal.git
yarn
package manager (Read installation guide)yarn install
in the root folder to install all dependenciesyarn dev
to start a dev server. This serves the example directory and live reloads when any files are changedyarn build
to build the files for distribution. This is run automatically as a pre-commit hook as well.First, you must be authorized on npmjs.com. Then:
lib/package.json
yarn deploy:npm
Update the changelog.
Commit and push changes
Tag the version in git:
git tag -a X.Y.Z
git push origin X.Y.Z
We are looking for more maintainers for Micromodal. If you are interested, and you have at least some free time to spend on this, reach out to @dkniffin.
This project is licensed under MIT license.
Derek Kniffin – @dkniffin 🇺🇸
Indrashish Ghosh – @_ighosh 🇮🇳
Kalpesh Singh - @knowkalpesh 🇮🇳
Darpan Kakadia - @kakadiadarpan 🇩🇪
Contributors - list 🌐
You? - Open a PR to get started!
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4