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;
    width: 25em;
    height: 15em;
    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;

mostrar.addEventListener("click", function(){
    fondo.style.display = "block";
    fondo.style.width = width + "px";
    fondo.style.height = height + "px";
    
    contenido.style.display = "block";
    contenido.style.top = ((height / 2) - (contenido.offsetHeight / 2) + window.scrollY) + "px";
    contenido.style.left = ((width / 2) - (contenido.offsetWidth / 2) + window.scrollX) + "px";
    
    body.style.overflow = "none";    
}, false);

fondo.addEventListener("click", function(){
    fondo.style.display = "none";
    fondo.style.width = 0;
    fondo.style.height = 0;
    
    contenido.style.display = "none";
    
    body.style.overflow = "auto";
}, false);