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

Estructura de archivos

Vamos a usar un archivo HTML, un archivo JS (JavaScript) y un archivo CSS. Los llamaremos index.html, popup.js 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 popup.js.​​

Aquí el archivo index.html tras aplicar los puntos 1 y 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Popup challenge</title>
</head>
<body>
    <button>Haz clic para ver el popup</button>
    <div class="popup-wrapper">
        <div class="popup">
            <div class="popup-close">x</div>
            <div class="popup-content">
                <h3>Ofertas libros JavaScript</h3>
                <p>¡No te pierdas las mejores ofertas de libros para aprender JavaScript!</p>
                <a href="https://amzn.to/2n9BJgk" target="_blank">¡Quiero verlos!</a>
            </div>
        </div>
    </div>
    
    <script src="popup.js"></script>
</body>
</html>

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.

popup start point

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:

popup terminado

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 eventYa 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';
    }
});

¡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