overlay.js

Slim fast overlay, no dependencies — just the basics
Demo

---

Getting Started

You may install overlay.js using package managers, or download project archive.

bower install overlay.js
npm install overlay.js

# overlay.min.js           minified version of overlay.js

Usage

element.addEventListener('click', function() {
    var layer = new Overlay({
        html: '',
        onAppend: function() {},
        onRemove: function() {}
    });
});

Callbacks

 // called right after `html` has been appended to document
onAppend: function() {}

// called right after `html` has been remove from document
onRemove: function() {}

CSS

/* required */
.overlay             { background: rgba(0, 0, 0, 0.75); width: 100vw; height: 100vh; position:fixed; top:0; animation: fade-in .5s; }
.overlay .-inner     { width: 100vw; height: 100vh; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content:center; -webkit-justify-content:center; -ms-flex-pack:justify; }
.overlay .-close     { position: absolute; top: 32px; right: 36px; padding: 8px 18px; border: 1px solid #FFF; }

/* overlay fade-in animation */
@-webkit-keyframes fade-in {
    from   { opacity: 0; }
    to     { opacity: 1; }
}
@keyframes fade-in {
    from   { opacity: 0; }
    to     { opacity: 1; }
}

---

License

This software is free to use under the MIT license.