https://github.com/alecaddd/amodal
Super lightweight and dependency free Modal built in ES6
https://github.com/alecaddd/amodal
css3 ecmascript2015 es2015 es6 modal
Last synced: 9 months ago
JSON representation
Super lightweight and dependency free Modal built in ES6
- Host: GitHub
- URL: https://github.com/alecaddd/amodal
- Owner: Alecaddd
- License: mit
- Created: 2017-06-12T00:20:55.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-19T22:34:39.000Z (almost 9 years ago)
- Last Synced: 2025-04-09T07:23:54.171Z (about 1 year ago)
- Topics: css3, ecmascript2015, es2015, es6, modal
- Language: JavaScript
- Size: 104 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# aModal
> Super lightweight and dependency free Modal built in ES6
[Demo on CodePen](https://codepen.io/Alecaddd/pen/XgdKjB)
## Installation
* Using NPM:
```sh
npm install amodal --save
```
* Using Bower:
```sh
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 `` tag.
* ES 2015
```javascript
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">
```
Be sure to include or import the default style
* SCSS
```scss
@import '/node_modules/amodal/dist/modal.css';
```
* Browser
```html
```
## Create the Modal HTML
```html
```
* **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.
```html
```
## Trigger the Modal
```html
Trigger Modal
```
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).
## License
[MIT](https://github.com/Alecaddd/aModal/blob/master/LICENSE.txt)