1.2.0 • Published 7 years ago
amodal v1.2.0
aModal
Super lightweight and dependency free Modal built in ES6
Installation
Using NPM:
npm install amodal --save
Using Bower:
bower install amodal --save
Include it in your project.
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:
```javascript require('amodal'); ```
AMD
```javascript require(['/node_modules/amodal/dist/index.js']); ```
Browser
```html <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
```html <link rel="stylesheet" href="/node_modules/amodal/dist/modal.css"> ```
Create the Modal HTML
<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">
Trigger the Modal
<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.
Compatibility
This script works in all mobile & desktop browsers, as well as IE 11, 10 (not 9, sorry).