Cómo construir un pop-up con vanilla JavaScript

¿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.

¡Y VOILÀ!

Nuestro popup está listo. ? Si te queda alguna duda, ¡nos vemos en los comentarios!

Y si crees que este post puede serle útil a alguien, ¡compártelo!

Otros artículos que pueden interesarte

Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Días del 160 al 203 – ¡Primer objetivo conseguido!
“A veces podemos pasarnos años sin vivir en absoluto, y de pronto toda nuestra vida se concentra en un solo[...]
Claves para entender Angular. Qué es y cómo se utiliza
Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).Frameworks¿Pero qué es[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

3 comentarios en «Cómo construir un pop-up con vanilla JavaScript»

  1. 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…

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información

Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.

Cerrar