JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<div id = "fondo"></div>
<div id = "contenido">
    ¡Hola mundo!
    Dale clic al fondo oscuro para cerrar esto
</div>
<button id = "mostrar">Mostrar ventana modal</button>

CSS

body{
    margin: 0;
}

#fondo, #contenido{
    display: none;
    position: absolute;
    z-index: 1000;
}

#fondo{
    background: rgba(0, 0, 0, .75);
    top: 0;
    left: 0;
}

#contenido{
    background: white;
    border-radius: .5em;
    overflow: auto;
    /* OPCIONAL */
    text-align: center;
    line-height: 15em;
    font-weight: bolder;
}

JavaScript

var mostrar = document.getElementById("mostrar"),
    fondo = document.getElementById("fondo"),
    contenido = document.getElementById("contenido"),
    body = document.body,
    width = window.innerWidth,
    height = window.innerHeight,
    widthCont = 400,
    heightCont = 240;

fondo.style.width = width + "px";
contenido.style.width = widthCont + "px";

mostrar.addEventListener("click", function(){
    fondo.style.display = "block";
    contenido.style.display = "block";
    
    contenido.style.top = ((height / 2) - (heightCont / 2) + window.scrollY) + "px";
    contenido.style.left = ((width / 2) - (widthCont / 2) + window.scrollX) + "px";
    
    var hF = 0, hC = 0,
        intervaloF = setInterval(function(){          
            if (hF <= height)
                fondo.style.height = (hF += 10) + "px";          
          
            if (hF >= height)
                clearInterval(intervaloF);
        }, 1),
        intervaloC = setInterval(function(){
            if (hC <= heightCont)
                contenido.style.height = (hC += 5) + "px";      
          
            if (hC == heightCont)
                clearInterval(intervaloC);
        }, 1);
  
    body.style.overflow = "hidden";    
}, false);

fondo.addEventListener("click", function(){
    var hF = height, hC = heightCont,
        intervaloF = setInterval(function(){          
            if (hF > 0)
                fondo.style.height = (hF -= 10) + "px";          
          
            if (hF <= 0){
                clearInterval(intervaloF);
                fondo.style.display = "none";
                body.style.overflow = "auto";
            }
        }, 1),
        intervaloC = setInterval(function(){            
            if (hC > 0)
                contenido.style.height = (hC -= 5) + "px";          
          
            if (hC <= 0){
                clearInterval(intervaloC);
                contenido.style.display = "none";
            }
        }, 1);
}, false);