JSFiddle - React, Tailwind, and code Playground

by Sven Esenschmidt

HTML

<script src="http://github.com/sixtyseconds/Model/raw/master/Demo/overlay.js"></script>
<script src="http://github.com/sixtyseconds/Model/raw/master/Source/modal.js"></script>
<link rel="stylesheet" href="http://github.com/sixtyseconds/Model/blob/master/Source/modal.css">
<a href="#" id="trigger">Trigger</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

JavaScript

var modal = new Modal({
    'onButton': function(e, button)
    {
        e.stop();
        this.hide();

        switch(button)
        {
            case 'cancel':
                alert('cancel clicked!');
                break;

            case 'ok':
                alert('ok clicked!');
                break;
        }
    }
});

document.id('trigger').addEvent('click', function(e) {
    e.stop();
    modal.show();
});