Introduction to Micromodal
Micromodal is a lightweight, configurable, and easy-to-use JavaScript library that allows you to create accessible modal dialogs. It is perfect for modern web applications because of its simplicity and small footprint.
Basic Setup
To get started with Micromodal, include the library in your HTML:
<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
Simple Modal Example
Create the HTML structure for your modal:
<div class="modal micromodal-slide" 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">
<header class="modal__header">
<h2 class="modal__title" id="modal-1-title">Your Title Here</h2>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>×</button>
</header>
<main class="modal__content" id="modal-1-content">
Your content goes here.
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</div>
</div>
</div>
Initialize Micromodal in your JavaScript:
document.addEventListener('DOMContentLoaded', function() {
MicroModal.init();
});
Using API Methods
Micromodal provides several API methods to control your modals more effectively:
Opening and Closing Modals
MicroModal.show('modal-1'); // Opens the modal with ID 'modal-1'
MicroModal.close('modal-1'); // Closes the modal with ID 'modal-1'
Custom Configuration
You can customize the behavior and appearance of your modals using optional configuration parameters:
MicroModal.init({
openTrigger: 'data-custom-open', // Attribute to open modals
closeTrigger: 'data-custom-close', // Attribute to close modals
openClass: 'is-open', // Class name added to opened modals
disableScroll: true, // Disable scrolling while modal is open
awaitCloseAnimation: true, // Wait for close animation to complete
});
App Example Using Micromodal
Here is a simple app example incorporating Micromodal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Micromodal Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.css">
<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
</head>
<body>
<button data-micromodal-trigger="modal-1">Open Modal</button>
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
... (modal HTML goes here) ...
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
MicroModal.init({
onShow: modal => console.log(`${modal.id} is shown`), // add event on show
onClose: modal => console.log(`${modal.id} is hidden`), // add event on close
awaitCloseAnimation: true, // set to true if animate.css is used
});
});
</script>
</body>
</html>
Micromodal is a versatile tool that can enhance the user experience of your web applications with minimal setup and configuration. Experiment with its API to create engaging and accessible modals.
Hash: 30b1d7d8ba9d40561a81aed99492598f3627beb99475693f0f3a3889c1fdbddc
