como construir un popup con vanilla JS

C贸mo construir un pop-up con vanilla JavaScript

脷ltima actualizaci贸n:

驴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

D铆as del 353 al 386
Objetivos versus realidad Y nuevamente, lleg贸 otro d铆a clave. Lleg贸鈥 pas贸. El pasado 4 de marzo este Reto Computer Geek[...]
Dates en JavaScript: Gu铆a completa
Introducci贸nLos dates son un tipo de objetos de JavaScript (JS), muy 煤tiles para trabajar con fechas, como podr铆a ser la fecha de[...]
D铆as del 2 al 4
"Si buscas resultados distintos no hagas siempre lo mismo" - Albert Einstein Estos d铆as estoy aprendiendo a hacer loops en[...]

Deja un comentario

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

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si contin煤as utilizando este sitio asumiremos que est谩s de acuerdo. m谩s informaci贸n

Los ajustes de cookies de esta web est谩n configurados para "permitir cookies" y as铆 ofrecerte la mejor experiencia de navegaci贸n posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estar谩s dando tu consentimiento a esto.

Cerrar