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);
<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; width: 25em; height: 15em; border-radius: .5em; overflow: auto; /* OPCIONAL */ text-align: center; line-height: 15em; font-weight: bolder; }