Storm Modal


Accessible modal dialog.

Example

https://stormid.github.io/storm-modal

Usage

HTML
``
Open modal

Dialog label

Focusable element

`

CSS
`
.modal {
position: absolute;
overflow: hidden;
width: 0;
height:0;
background-color: rgba(0,0,0,.9);
top:0;
left:0;
opacity:0;
visibility:hidden;
}
.modal.active {
opacity:1;
visibility: visible;
overflow: auto;
position: fixed;
width: auto;
height: auto;
bottom: 0;
right: 0;
z-index: 9;
}
`

JS
`
npm i -S storm-modal
`
either using es6 import
`
import Modal from 'storm-modal';

Modal.init('.js-modal');
`
aynchronous browser loading (use the .standalone version in the /dist folder)
`
import Load from 'storm-load';

Load('/content/js/async/storm-modal.standalone.js')
.then(() => {
StormModal.init('.js-modal');
});
`

Options


`
{
onClassName:'active',
mainSelector: 'main',
modalSelector: 'js-modal',
callback: false
}
`

e.g.
`
StormModal.init('.js-modal', {
callback(){
console.log(this);
}
});
`

Tests


`
npm run test
``

Browser support

This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

The es5 version depends upon Object.assign so all evergreen browsers are supported out of the box, ie9+ is supported with polyfills. ie8+ will work with even more polyfils for Array functions and eventListeners.

Dependencies

None

License

MIT