Super lightweight and dependency free Modal built in ES6
-
Using NPM:
npm install amodal --save
-
Using Bower:
bower install amodal --save
-
The script is already compiled via Gulp, browserify and babelify. Use it with Webpack, Browserify, RequireJS or by simply including a
<script>
tag. -
ES 2015
import 'amodal';
-
CommonJS:
require('amodal');
-
AMD
require(['/node_modules/amodal/dist/index.js']);
-
Browser
<script src="/node_modules/amodal/dist/index.js"></script>
Be sure to include or import the default style
-
SCSS
@import '/node_modules/amodal/dist/modal.css';
-
Browser
<link rel="stylesheet" href="/node_modules/amodal/dist/modal.css">
<div id="modal-1" class="modal">
<div class="modal-inner">
<a class="js-close-modal">×</a>
<div class="modal-content">
<h3>Modal Title</h3>
<p>This is my modal content</p>
</div><!-- .modal-content -->
</div><!-- .modal-inner -->
</div><!-- .modal -->
- Backdrop Support: By default, the Modal will automatically close if a click is registered on the backdrop dark overlay area underneath an open modal. You can control this behaviour by setting a boolean data attribute to your modal container.
<div id="modal-1" class="modal" data-backdrop="false">
<a class="js-modal" data-modal="modal-1">Trigger Modal</amodal>
The script is initialized by default and detects every instance of the class js-modal
.
You can hook your trigger to the modal via the data attribute data-modal
by specifying the modal ID.
This script works in all mobile & desktop browsers, as well as IE 11, 10 (not 9, sorry).