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[...]
Guía de iniciación al data binding en Angular
¬ŅQu√© es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido din√°mico en lugar de est√°tico (en ingl√©s, hardcoded). Podr√≠amos[...]
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