¿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).
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
Si te queda alguna duda, ¡nos vemos en los comentarios!Otros artículos que pueden interesarte
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…