Posted in
10100
11:45 pm, November 28, 2021
Micro Modal a tiny animated light accessible modal script
What is Micro Modal?
Micro Modal is a 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.
Preview
a preview of Micro Modal
What can i use this for?
- Toggles relevant aria attributes on open and close
- Closes modal on overlay clic
- 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
Should I use it?
If you want a modal that is very light weight and not reliant on any heavy javascript libraries like JQuery this could be a great addition to your site.
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
Original Source
Micro Modal a tiny animated light accessible modal script Demo
View Demo Full Screen View Demo New Tab
Micro Modal a tiny animated light accessible modal script Code
HTML
<h1>microModal Example</h1>
<div class="modal micromodal-bounce" id="modal-1" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" aria-describedby="modal-1-content">
<div role="document">
<header class="modal__header">
<h3 class="modal__title" id="modal-1-title"> Micromodal </h3>
<button class="modal__close" aria-label="Close modal" aria-controls="modal__container1" data-micromodal-close></button>
</header>
<main class="modal__content" id="modal-1-content">
<p> Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal. </p>
</main>
<footer class="modal__footer">
<button class="modal__btn modal__btn-primary">Continue</button>
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</div>
</div>
</div>
</div>
CSS
.modal[aria-hidden='true'] { display: none; }
.modal { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; }
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
}
.modal__container {
background-color: #fff;
padding: 30px;
max-width: 500px;
max-height: 100vh;
border-radius: 4px;
overflow-y: auto;
box-sizing: border-box;
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__title {
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.25;
color: #00449e;
box-sizing: border-box;
}
.modal__close {
background: transparent;
border: 0;
}
.modal__header .modal__close:before { content: "\2715"; }
.modal__content {
margin-top: 2rem;
margin-bottom: 2rem;
line-height: 1.5;
color: rgba(0,0,0,.8);
}
.modal__btn {
font-size: .875rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: .5rem;
padding-bottom: .5rem;
background-color: #e6e6e6;
color: rgba(0,0,0,.8);
border-radius: .25rem;
border-style: none;
border-width: 0;
cursor: pointer;
-webkit-appearance: button;
text-transform: none;
overflow: visible;
line-height: 1.15;
margin: 0;
will-change: transform;
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform .25s ease-out;
transition: transform .25s ease-out;
transition: transform .25s ease-out, -webkit-transform .25s ease-out;
}
.modal__btn:focus, .modal__btn:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.modal__btn-primary {
background-color: #00449e;
color: #fff;
}
Scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.10/micromodal.js"></script>
Javascript
MicroModal.init();
MicroModal.show('modal-1');
Related Tags
Add Comment
Other Items in Modals
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript