Descargar ejemplo de ventana modal con CSS y JavaScript en español

para poder crear una ventana modal necesitamos tres apartados

el primero es definir los estilos CSS para el diseño de la ventana modal,

el siguiente apartado es el HTML en el que se define con qué elemento haremos que aparezca la ventana modal y también se define el diseño de la propia ventana modal

y para finalizar el tercer apartado en el cual ponemos la programación en Javascript

veamos que se tiene que escribir en cada uno de estos apartados y recuerda que si quieres descargar el código completo de esta ventana modal pulsa aquí ….

descargar ventana modal

en el apartado CSS tenemos definidas diferentes clases

la primera es la mascara qué será un div que ocupará toda la pantalla, será de color negro con un poco de opacidad para que nos oculte la página en sí cuando aparezca la ventana modal, tenemos definido que esté oculta , que este en la posición 0 y que ocupe el 100%

también tenemos el contenido qué es la pequeña cajita donde pondrás el texto que quieres que aparezca en la ventana modal

y después tenemos unas clases para el botón de cerrar la ventana modal

<!DOCTYPE html>
<html>
<head>
<style>
.mascara {
 display: none; 
 position: fixed; 
 z-index: 1; 
 padding-top: 100px; 
 left: 0;
 top: 0;
 width: 100%; 
 height: 100%; 
 overflow: auto; 
 background-color: rgb(0,0,0); 
 background-color: rgba(0,0,0,0.4); 
}
.contenido {
 background-color: #fefefe;
 margin: auto;
 padding: 20px;
 border: 1px solid #888;
 width: 80%;
}
.cerrar {
 color: #aaaaaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}
.cerrar:hover,
.cerrar:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}
</style>
</head>

en el apartado del HTML tenemos definido un botón en el que pulsaremos para que aparezca la ventana modal y la ventana modal en sí que consta de dos divs uno para la máscara y otro para el contenido

aquí es donde puedes personalizar que quieres que aparezca dentro de la ventana modal

<body>
<button id="Btn">Abrir ventana modal</button>
<div id="lamascara" class="mascara">
 <div class="contenido">
 <span class="cerrar">&times;</span>
 <p>Hola cybernauta ...</p>
 </div>
</div>

y para finalizar en el apartado de JavaScript tenemos definidos los diferentes eventos que queremos que ocurra

cuando hacemos clic en el botón queremos que se visualice la máscara que es la ventana modal

y cuándo hacemos  clic en el botón de cerrar queremos que se oculte la máscara es decir la ventana modal

<script>
var mascara = document.getElementById('lamascara');
var btn = document.getElementById("Btn");
var cerrar = document.getElementsByClassName("cerrar")[0];

btn.onclick = function() {
 mascara.style.display = "block";
}
cerrar.onclick = function() {
 mascara.style.display = "none";
}
window.onclick = function(event) {
 if (event.target == mascara) {
 mascara.style.display = "none";
 }
}
</script>
</body>
</html>

como ves es muy fácil crear una ventana modal utilizando solo CSS y JavaScript y recuerda que en la parte de arriba de esta entrada tienes un enlace para descargar el código completo y adaptarlo a tu página web