Lite Modal
The lightweight vanilla JS modal script
Turn any element into a modal by simply adding a class!
Features
- Flexible: Works with any content. (divs, images, videos, you name it!)
- Cross Browser: Compatible with all major browsers including IE9 and above. (Tested with IE's browser emulation)
- No jQuery: Drop it into any project. There are no dependencies!
- Customizable: As plain as possible while providing the functionality. You have control over all the styling!
- Lightweight: Only 1.4kb minified!
Setup
-
Link to the script in the
<head>of your project like so:
<script type="text/javascript" src="path/to/lite-modal.min.js"></script> -
Add as many modals as you want using the class
lite-modal:
<div id="login-form" class="lite-modal">...</div> -
Open a specific modal by targeting it with a CSS selector:
liteModal.open('#login-form'); -
Close the modal:
liteModal.close();
Clicking the background or the ESC key will also close the modal.