¿Qué vamos a construir?
Vamos a construir una ventana emergente, popup, overlay, dialog o como quieras llamarla, pero esos 3 nombres son los más comunes. Definiremos un comportamiento poco molesto, es decir, no vamos a hacer que salte el popup cuando entramos a nuestra web, sino que sólo aparecerá si hacemos click en un botón.
Aquí tienes una demo para que te hagas una idea. 👈
Pre-requisitos
Para poder entender este coding challenge es necesario que sepas lo que es el DOM y cómo acceder a él. Por suerte, puedes consultar esta DOM Saga donde te explico todo lo que necesitas saber. 😁
También deberás saber algo de CSS (lo básico).
Estructura de archivos
Vamos a usar un archivo HTML, un archivo JS (JavaScript) y un archivo CSS. Los llamaremos index.html, popup.js y styles.css respectivamente.
Construcción del popup
¡Vamos al lío! 🙆
1. Construimos primero nuestro archivo HTML. Tendremos un botón que disparará el popup, es decir, hará de trigger 🔫. Tendremos también un <div> que hará de envoltorio del popup. El envoltorio (aka wrapper), lo vamos a utilizar para darle en típico fondo oscuro que adquieren las páginas web cuando salta una ventana emergente.
2. Dentro del wrapper insertamos el popup y le añadimos un contenido, el que queramos. También necesitaremos un botón para cerrarlo. No olvides vincularlo a los archivos styles.css y popup.js.
Aquí el archivo index.html tras aplicar los puntos 1 y 2:
Con esto ya deberías ver en tu navegador una página, bastante horrible por cierto 🙄. Vamos a solucionar esto con un poco de CSS.
3. Vamos al archivo styles.css y apañamos un poco la apariencia de nuestro popup. A nuestro botón le aplicamos unos estilos normales, nada del otro mundo.
Configuramos también nuestro wrapper, aplicándole un color semi-transparente que ocupará toda la página cuando el popup sea visible.
Aquí el archivo después de aplicarle nuestros cambios:
button {
display: block;
margin: 20px auto;
background: salmon;
color: white;
border: 0;
padding: 6px 10px;
cursor: pointer;
}
button:hover {
background: palevioletred;
transition: all 0.2s;
}
.popup-wrapper {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
width: 100%;
max-width: 300px;
background: white;
margin: 10% auto;
padding: 20px;
position: relative;
}
.popup a {
background: salmon;
color: white;
text-decoration: none;
padding: 6px 10px;
margin: 30px auto;
display: block;
width: 50%;
}
.popup a:hover {
background: palevioletred;
transition: all 0.2s;
}
.popup-close {
position: absolute;
top: 5px;
right: 15px;
cursor: pointer;
font-size: 1.5rem;
}
Ahora tu página debería tener este aspecto:
Bueno, bueno, esto ya es otra cosa. 😏
4. Pero no queremos que nuestro popup aparezca por defecto en la página, sino sólo al hacer click en el botón para ello. Así que ocultamos el wrapper del popup con CSS para que ese sea su comportamiento inicial (oculto). Para ello, añadimos esta línea al elemento .popup-wrapper en el archivo styles.css:
display: none;
Y ahora ya no deberías verlo en tu web.
Vamos a utilizar JS para añadirle funcionalidad. 💪
5. Seleccionamos el botón y le añadimos un click event. Ya que la callback function se encargará de mostrar el popup, tenemos que seleccionar el popup primero para poder pasárselo a dicha función.
Aquí el bloque de código que hemos añadido:
const button = document.querySelector('button');
const popup = document.querySelector('.popup-wrapper');
button.addEventListener('click', () => {
popup.style.display = 'block';
});
Con estos cambios, el popup ya se dispara al hacer click en el botón. ¡Genial! 🤗 Pero aún no tenemos forma de cerrarlo.
6. Queremos cerrarlo de dos maneras: con la cruz de arriba a la derecha y haciendo click sobre el fondo oscuro. Así que primero obtenemos una referencia a la X, que actuará como botón para cerrar el popup. Después le aplicamos un click event y hacemos que el popup desaparezca usando la propiedad style.
7. En cuanto al fondo oscuro, le agregamos igualmente un click event y hacemos que el popup desaparezca al hacer click sobre el fondo. Hay muchas formas de conseguir esto. Yo he decidido utilizar la propiedad className, accesible a través del e.target.
🧐 Mi proceso para averiguar cómo quitar el popup al pulsar el fondo negro ha sido haciendo console.log del e. Con eso, he ido haciendo click en sitios distintos de mi página y analizando por consola el MouseEvent a cada click en una zona distinta. Así localicé la propiedad className: "popup-wrapper". El valor popup-wrapper sale sólo al hacer click sobre el fondo negro.
Así que hago un if statement para comprobar si el click se ha hecho sobre el popup-wrapper.
Así queda el archivo popup.js después de aplicarle los cambios:
const button = document.querySelector('button');
const popup = document.querySelector('.popup-wrapper');
const close = document.querySelector('.popup-close');
button.addEventListener('click', () => {
popup.style.display = 'block';
});
close.addEventListener('click', () => {
popup.style.display = 'none';
});
popup.addEventListener('click', e => {
// console.log(e);
if(e.target.className === 'popup-wrapper') {
popup.style.display = 'none';
}
});
Otros artículos que pueden interesarte
[VÍDEO] Claves para convertirte en Frontend Developer
Si te gustaría convertirte en Desarrollador/a Frontend sin tener que dejar tu trabajo mientras estudias y sin que te cueste un riñón, he preparado un vídeo para ti.
Genial Lucas, gracias por tu aporte!😃
Hola, me sirvió. El código se puede mejorar utilizando la propagación
para serrarlo en un solo escuchador de eventos.
popup.addEventListener(‘click’, () => {
if(e.target.className === ‘popup-wrapper’ || ‘popup-close’ ) {
popup.style.display = ‘none’;
}
});
https://es.javascript.info/bubbling-and-capturing
No se porqué pero cuando lo integro en mi web no funciona pero si creo un archivo html nuevo si…
No sé que ocurre.
Quiero hacer dos botones : Entrada y Salida
pero no funciona…