Una ventana modal o modal box es un recuadro que aparece sobre la página, con la particularidad de que bloquea todas las funciones y concentra el foco en una acción particular, de modo que el usuario solamente puede hacer esa acción o cerrar la ventana.
Las ventanas modales se activan cuando el usuario hace clic en un botón, un link, etc. (si apareciera automáticamente se consideraría un pop-up).
Hay mil maneras de crear una ventana modal: sólo con CSS, con CSS y Javascript, con librerías…
En esta ocasión os traigo un snippet para crear una ventana modal, o modal box, utilizando HTML, CSS y Javascript.
Comenzamos por el HTML, que será el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Ventana modal</h2>
<button id="abrirModal">Abrir Modal</button>
<!-- Ventana modal, por defecto no visiblel -->
<div id="ventanaModal" class="modal">
<div class="modal-content">
<span class="cerrar">×</span>
<h2>Ventana modal</h2>
<p>Esto es el texto de la ventana</p>
</div>
</div>
</body>
</html>
Como puedes comprobar, tenemos un botón con un identificador abrirModal que nos permitirá utilizarlo en Javascript para asociarle el evento que abrirá la ventana modal.
Y, además, tenemos la ventana modal que, por defecto, no será visible, ya que en CSS hemos utilizado la propiedad correspondiente para ocultarla.
El primer div, llamado ventanaModal, lo utilizaremos para ocultar toda la página principal con un fondo negro con opacidad del 50%; el segundo, llamado contenidoModal, hace referencia a la ventana o caja, propiamente dicha.
Veamos ahora el CSS, paso a paso:
body {font-family: Arial, Helvetica, sans-serif;}
/* Fondo modal: negro con opacidad al 50% */
.modal {
display: none; /* Por defecto, estará oculto */
position: fixed; /* Posición fija */
z-index: 1; /* Se situará por encima de otros elementos de la página*/
padding-top: 200px; /* El contenido estará situado a 200px de la parte superior */
left: 0;
top: 0;
width: 100%; /* Ancho completo */
height: 100%; /* Algura completa */
overflow: auto; /* Se activará el scroll si es necesario */
background-color: rgba(0,0,0,0.5); /* Color negro con opacidad del 50% */
}
Como puedes ver, inicialmente establecemos la fuente de la página en el body a Arial, Helvetica o cualquier fuente sin serifa en caso de que las dos anteriores no existieran.
Y seguidamente, creamos el modal, es decir, el color negro con opacidad que se superpone sobre la pantalla evitando hacer clic sobre nada que haya por debajo. Podrás ver que inicialmente está oculto mediante display: none; que cuando se visualice se situará por encima del resto de elementos de la pantalla gracias al z-index: 1; y que necesitaremos utilizar el modo rgba para indicar la opacidad en la propiedad background-color.
Veamos ahora la ventana o caja modal, propiamente dicha:
.contenido-modal {
position: relative; /* Relativo con respecto al contenedor -modal- */
background-color: white;
margin: auto; /* Centrada */
padding: 20px;
width: 60%;
-webkit-animation-name: animarsuperior;
-webkit-animation-duration: 0.5s;
animation-name: animarsuperior;
animation-duration: 0.5s
}
Como puedes ver, se sitúa con una posición relativa sobre el contenedor, por lo que como hemos indicado anteriormente que tendrá un padding-top de 200px, esta ventana se verá 200px por debajo del borde.
Además, será de color blanco, centrada gracias al margin: auto, tendrá un padding en todos los bordes de 20px y un ancho con respecto al contenedor del 60%.
Por último, estamos incluyendo una pequeña animación llamada animarsuperior que tiene una duración de 0,5 segundos. Añadimos el prefijo -webkit- para navegadores basados en Chromium, como Chrome o Safari. Veamos esa animación:
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animarsuperior {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
Como puedes comprobar, para definir la animación utilizamos @keyframes, e indicamos que partiremos de una posición de -300 con opacidad 0, y terminaremos con una posición de 0 con opacidad 1. Utilizamos el mismo prefijo que en el caso anterior para asegurarnos que funciona en navegadores Chrome y Safari.
.close {
color: black;
float: right;
font-size: 30px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
En este último código CSS añadimos los estilos del elemento que contiene la X de cierre de la ventana: en color negro, alineado a la derecha… y cuando nos colocamos sobre ella o toma el foco, no tendrá subrayado y el cursor tomará el valor de una mano.
Visto esto, solamente nos queda la parte de Javascript. Comenzamos guardando en variables los tres elementos que utilizaremos: la ventana modal, el botón que la ejecuta y el span que la cierra.
// Ventana modal
var modal = document.getElementById("ventanaModal");
// Botón que abre el modal
var boton = document.getElementById("abrirModal");
// Hace referencia al elemento <span> que tiene la X que cierra la ventana
var span = document.getElementsByClassName("cerrar")[0];
A continuación puedes ver los tres eventos que vamos a ejecutar. Cuando el usuario hace clic en el botón, cambiamos el valor del display a block, mostrando la ventana modal.
Y en el caso de que el usuario haga clic en la X o en cualquier parte del fondo negro, la ventana volverá a ocultarse, ya que cambiamos el valor del display a none.
// Cuando el usuario hace clic en el botón, se abre la ventana
boton.addEventListener("click",function() {
modal.style.display = "block";
});
// Si el usuario hace clic en la x, la ventana se cierra
span.addEventListener("click",function() {
modal.style.display = "none";
});
// Si el usuario hace clic fuera de la ventana, se cierra.
window.addEventListener("click",function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
¡Y eso es todo! ¿A que es más sencillo de lo que parece? ¡Echa un ojo en el código fuente en funcionamiento!
