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

// CommonJS (optional)
var Overlay = require('./overlay.js');

// AMD (optional)
require(['overlay.js'], function(Overlay) {
    // …
});

element.addEventListener('click', function() {
    var layer = new Overlay({
        html: '',  // html string or node type
        close: {
            default: true, // default close button (boolean)
            onstage: true, // close on click event (anywhere on `.stage` element)
            text: "Close" // innerHTML
        },
        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() {}

Public Method

 // remove overlay from the DOM
.remove();

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.