JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>This is a demo</title>
</head>

<body>
<input type='button' id='acept' value='Click me!'/>
</body>

</html>

CSS

body{
    font-family: verdana, arial;
}
/*POPUP*/
#capasombra {
background:#424242 none repeat scroll 0 0;
cursor:pointer;
left:0;
opacity:0;
position:absolute;
text-align:center;
top:0;
}
#capapopup {
/*background-color:#ccF;*/
background-image:url('../image/ajax-loader.gif');
background-repeat:no-repeat;
opacity:0.8;
/*border:3px solid #339;*/
height:24px;
left:50%;
overflow:hidden;
padding:4px;
position:absolute;
text-align:left;
width:4px;
}
#cerrarpopup {
background:transparent url(images/cerrarpopup.png) no-repeat scroll 0 0;
cursor:pointer;
float:right;
height:28px;
width:35px;
}
#titulopopup {
background: #cf6 none repeat scroll 0 0;
border-bottom: 2px solid #ffc;
font-size:1em;
font-weight:bold;
height:32px;
line-height:27px;
margin-bottom:3px;
overflow:hidden;
padding:2px 3px 0 10px;
text-align:left;
}
#contenidopopup {
font-size:10px;
display:none;
opacity:0;
}
.cuerpotextopopup{padding:5px;font-size: 0.75em;}

JavaScript

var popup = new Class({
    Implements: Options,
    options:{
        _html:'',
        _title:''
    },    
    initialize: function(options){
        this.setOptions(options);
        this.tamanoBody = window.getScrollSize();
        this.posScroll = window.getScroll();
        this.espacioDisponibleVentana = window.getSize();
        this.createPopup();
    },
    createPopup: function(){
        var options = this.options;
        this.capaSombra  = new Element('div',{'id': 'capasombra', 'style': 'width:' + this.tamanoBody.x +'px; height:'+ this.tamanoBody.y +'px;'});
        this.capaSombra.inject(document.body);
        var myFx = new Fx.Tween(this.capaSombra,{'duration': 300});
        myFx.start('opacity',0,0.8);
        
        //this.contenido = new Element("div", {'id': 'contenidopopup'});
        //this.contenido.set('html', "<div class=cuerpotextopopup>" + options._body + "</div>");
        
        this.capaPopup = new Element("div", {'id': 'capapopup', 'style': 'margin-left:-' + 31/2 +'px; top:' + (this.posScroll.y + (this.espacioDisponibleVentana.y/2) - (31/2)-15) +'px'});
        this.capaPopup.inject(this.capaSombra,'after');
        var myFx2 = new Fx.Tween(this.capaPopup,{'duration': 700});
        myFx2.start('width',4,100);
        /*myFx2.addEvent('complete', function(){
            var myFx3 = new Fx.Tween(this.capaPopup,{'duration': 700});
            myFx3.start('height',4,50+30);
            myFx3.addEvent('complete', function(){
                this.contenido.inject(this.capaPopup, 'top');
                this.contenido.setStyle('opacity', 0);
                this.contenido.setStyle('display', 'block');
                var myFx4 = new Fx.Tween(this.contenido,{'duration': 600});
                myFx4.start('opacity',0,1);
            }.bind(this));
        }.bind(this));*/
        this.capaSombra.addEvent('click', function(){
                this.closeWin();
            }.bind(this)
        );
    },
    closeWin: function(){
       ...