Crear popups con código

Aprende a crear popups con código

Hace unas semanas hemos visto cómo podemos crear un popup en WordPress para mostrar un formulario de correo electrónico. En esta ocasión vamos a aprender a crear popups por código.

Popups o ventanas emergentes

Pueden ser muchas las ocasiones en las que podemos necesitar abrir un popup, ya sea para mostrar una información concreta, o como en el caso anterior, mostrar un formulario emergente.

Como bien he dicho, un popup sirve para mostrar cierta información, que siendo importante, no es tan relevante que sea mostrada directamente en tu página web. Un ejemplo de esto puede ser abrir, mediante un botón o un link, una ventana que muestre los términos y condiciones de una web.

Pasos a seguir para crear popups con código: crear el JavaScript necesario para que se cree el popup

Lo primero que vamos a hacer es crear el código JavaScript para que se pueda crear el popup. Este código tenemos que pegarlo en la carpeta js de nuestro tema activo. Si no sabes cómo ni dónde pegarlo, puedes instalar el plugin Scripts n Styles, o cualquier otro que permita introducir código en cualquier página o post.

En nuestro ejemplo utilizaremos el siguiente código:

<script type=«text/javascript»>
var modal = document.querySelector(«.ventana»);
var trigger = document.querySelector(«.trigger»);
var closeButton = document.querySelector(«.boton-cerrar»);
function toggleModal() {
modal.classList.toggle(«mostrar-ventana»);
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener(«click», toggleModal);
closeButton.addEventListener(«click», toggleModal);
window.addEventListener(«click», windowOnClick);
</script>

Recuerda que si vas a utilizar el código directamente en un archivo .js, debes ponerle las etiquetas de inicio y de cierre del mismo:

<script type=»text/javascript»>

Aquí va tu código JavaScript

</script>

Pasos a seguir para crear popups con código: crear el objeto sobre el que hacer clic

A continuación vamos a crear un botón sobre el que tenemos que hacer clic para que se abra el popup. El código que vamos a utilizar para crear el botón es el siguiente:

<button class=»trigger»>Abrir POPUP</button>
<div class=»ventana»>
<div class=»contenido-ventana»>
<span class=»boton-cerrar»>&times;</span>
<h1>Texto o contenido del popup. Aquí podrías poner el texto de los términos o condiciones de uso de tu web</h1>
</div>
</div>

Con este sencillo código hemos creado un botón que al pulsarlo abrirá una ventanita con un contenido concreto. Este mismo código también ha creado la opción de cerrar el popup.

Una vez creado el popup, a continuación vamos a crear el código CSS para darle forma a la ventanita empergente, es decir, para ponerla bonita.

Pasos a seguir para crear popups con código: código CSS para hacer bonito el popup

Por defecto, el código no se va a adaptar a los estilos de nuestro tema activo, por lo que, siempre que trabajemos con código HTML propio, deberemos crear clases específicas para hacer que lo que haga ese código, se adapta en la medida de lo posible al estilo de nuestra web.

En esta ocasión vamos a utilizar el siguiente código:

.ventana {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.contenido-ventana {
position: absolute;
top: 50%; left: 50%
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}

.boton-cerrar {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}

.boton-cerrar:hover {
background-color: darkgray;
}

.mostrar-ventana {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

Este código podemos pegarlo en el apartado CSS Adicional del personalizador de nuestro tema activo (menú Apariencia, Personalizar, CSS Adicional).

Recuerda que en tu caso puedes cambiar los colores, tamaños o cualquier otra clase, para adaptarlo a la imagen corporativa de tu web. Para ello puedes cambiar las clases .ventana y .contenido-ventana.

El resultado sería este:

Resultado popups con código
Resultado popups con código


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *