Micromodal

---

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.

Demo and documentation

Codepen example

 

Features

✔ 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

✔ Supports nested modals

 

Installation

via npm

npm install micromodal --save

via yarn

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>

direct download

curl -O -L https://unpkg.com/micromodal/dist/micromodal.min.js

 

IE 11 and below

Please use this pollyfill suggested here.

 

Changelog

Find the latest changelog here.

 

Contributing

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.

Development setup

1. Clone Github repo $ git clone https://github.com/ghosh/micromodal.git
2. Run npm install in the root folder to install all dependencies
3. Run npm run dev to start a dev server. This serves the example directory and live reloads when any files are changed
4. [Optional] Run npm run build to build the files for distribution. This is run automatically as a pre-commit hook as well.
5. Send us pull request and chill

Pushing a new version

First, you must be authorized on npmjs.com. Then:

1. Update the npm package:

• Update the version in package.json
• npm run deploy

2. Update the changelog.

3. Commit and push changes

4. Tag the version in git:

• git tag -a X.Y.Z
• Add the same text as the changelog to the tag description
• git push origin X.Y.Z

5. Create a new release in Github: https://github.com/micromodal/micromodal/releases

• Publishing the release automatically triggers the docs deployment to GitHub Pages via the Deploy Docs workflow.

 

Want to be a core maintainer?

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.

 

Licensing

This project is licensed under MIT license.

 

Related

• Microtip - Modern, lightweight, accessible css tooltip library. Just 1kb.

 

Created and maintained by

Derek Kniffin – @dkniffin 🇺🇸

Indrashish Ghosh – @_ighosh 🇮🇳

Kalpesh Singh - @knowkalpesh 🇮🇳

Darpan Kakadia - @kakadiadarpan 🇩🇪

Contributors - list 🌐

You? - Open a PR to get started!