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);
<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>
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; }