JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<!-- <script src="https://raw.github.com/darkwing/Overlay/master/Source/Overlay.js"></script> -->
<script>
var Overlay = new Class({

    Implements: [Options, Events],

    options: {
        id: 'overlay',
        color: '#000',
        duration: 500,
        opacity: 0.5,
        zIndex: 5000/*,
        onClick: function(){},
        onClose: function(){},
        onHide: function(){},
        onOpen: function(){},
        onShow: function(){}
        */
    },

    initialize: function(container, options){
        this.setOptions(options);
        this.container = document.id(container);

        this.bound = {
            'window': {
                resize: this.resize.bind(this),
                scroll: this.scroll.bind(this)
            },
            overlayClick: this.overlayClick.bind(this),
            tweenStart: this.tweenStart.bind(this),
            tweenComplete: this.tweenComplete.bind(this)
        };

        this.build().attach();
    },

    build: function(){
        this.overlay = new Element('div', {
            id: this.options.id,
            styles: {
                position: (Browser.ie6) ? 'absolute' : 'fixed',
                background: this.options.color,
                left: 0,
                top: 0,
                'z-index': this.options.zIndex,
                opacity: 0
            }
        }).inject(this.container);
        this.tween = new Fx.Tween(this.overlay, {
            duration: this.options.duration,
            link: 'cancel',
            property: 'opacity'
        });
        return this;
    }.protect(),

    attach: function(){
        window.addEvents(this.bound.window);
        this.overlay.addEvent('click', this.bound.overlayClick);
        this.tween.addEvents({
            onStart: this.bound.tweenStart,
            onComplete: this.bound.tweenComplete
        });
        return this;
    },

    detach: function(){
        var args = Array.prototype.slice.call(arguments);
       ...

JavaScript

var status = 'close';

var overlay = new Overlay('body', {color:'steelblue',duration:5000});
    overlay.addEvent('open', function(){status='open'});
    overlay.addEvent('close', function(){status = 'close';});   
    overlay.addEvent('closing', function(){status='closing'}); 
    overlay.addEvent('opening', function(){status='opening'});                                           
    overlay.open();

$(document.documentElement).addEvent('keydown', function(event){
    if(event.key == 'esc' && status == 'open'){
        overlay.close();
    }
})