Cómo crear una ventana modal emergente en Webflow

Para este ejemplo, crearemos una ventana emergente que aparece cuando alguien hace clic en un botón de la página.

Usaré nuestra plantilla de blog gratuita, Escape, y simplemente añadiré el botón de suscripción y la ventana emergente a la plantilla. ¡Mira el video para ver cómo se hace y sigue leyendo para conocer los detalles!

Paso 1: Añade el contenedor de la ventana modal

Primero, arrastraremos un bloque Div que servirá como contenedor para la ventana modal.

Mientras lo arrastras, asegúrate de colocarlo en la parte superior del cuerpo (body) de tu sitio; es más fácil hacerlo usando el panel del Navegador.

Paso 2: Dale estilo al contenedor de la ventana modal

Una vez que hayamos añadido el bloque Div a la parte superior de nuestra página, le asignaremos una clase para poder darle estilo:

Nombre de la clase: Modal Wrapper

Relleno superior (Padding): 80px

Altura (Height): 100%

Posición (Position): Fija, cubrir todo

Z-index: 9999

Alineación de texto: Centrado

Color de fondo: rgba(0,0,0,0.5)

Ahora tu pantalla debería verse así:

Paso 3: Añade tu contenedor de registro

Ahora añadiremos otro bloque Div a nuestro contenedor modal para que contenga nuestro contenido, incluido el formulario de registro.

Simplemente arrastra un bloque Div y suéltalo dentro de tu contenedor modal.

Paso 4: Dale estilo al contenedor de registro

Ahora que tenemos el nuevo contenedor de registro dentro del contenedor modal, vamos a asignarle una clase y darle estilo:

Nombre de la clase: Signup Wrapper

Relleno - Todos los lados: 20px

Margen: Automático

Ancho: 450px

Ancho máximo: 100%

Color de fondo: Blanco

Paso 5: Añade el contenido de tu modal

Con la estructura lista, vamos a añadir el resto del contenido.

Primero, arrastraremos un encabezado (H3), un poco de texto de párrafo y un elemento de formulario.

Voy a reducir el elemento de formulario a un campo de correo electrónico y crear clases para los elementos del formulario.

Nombre de la clase: Form Field

Altura: 50px

Borde: 2px #4aaec2

Nombre de la clase:Subscribe Submit Button

Altura: 50px

Ancho: 100%

Color de fondo: #5cc489

(También actualicé el texto predeterminado del encabezado y del párrafo. Porque siempre es mejor diseñar con contenido real.)

Paso 6: Añadir un enlace de cierre

A continuación, añadiremos un enlace de texto para que los usuarios puedan cerrar la ventana modal una vez que se hayan registrado.

Solo tienes que arrastrar un enlace de texto a la parte superior de nuestro contenedor de registro (Signup Wrapper) y asignarle una clase con los siguientes estilos.

Nombre de la clase: Close Link

Visualización: Bloque

Alineación de texto: Centrado

Tamaño de fuente: 12px

Color de fuente: #999999

Paso 7: Añadir una interacción al contenedor modal

Los pasos finales tienen que ver con las interacciones. Necesitamos añadir una interacción al contenedor modal (Modal Wrapper), al botón de suscripción y al enlace de cierre.

Empezando por el contenedor modal, añadiremos una interacción llamada Modal Wrapper.

Configuraremos la apariencia inicial de la siguiente manera:

Escala: 1.10

Opacidad: 0%

Visualización: Ninguna

¡Eso es todo! Esto simplemente asegura que, al cargar la página, la ventana modal no se muestre.

Paso 8: Añadir una interacción al botón de suscripción

Ahora vamos a añadir una interacción al botón de suscripción para que abra el contenedor modal al hacer clic.

Primero, selecciona el botón de suscripción y añade una nueva interacción. Saltaremos la apariencia inicial y pasaremos directamente a configurar el activador de clic.

Luego, añadiremos el contenedor modal como el elemento que queremos que afecte esta interacción. Para hacerlo, simplemente escribe “Modal Wrapper” en el primer campo de texto.

Ahora, cualquier interacción que añadamos afectará al contenedor modal, no al botón.

Vamos a añadir lo siguiente para nuestro primer clic:

Paso 1:

Visualización: Bloque

Paso 2:

Escala: 1

Opacidad: 100%

Como no lo necesitamos, dejaremos el segundo clic vacío.

Paso 9: Añadir una interacción al enlace de cierre

¡Ya casi terminamos! La pieza final es añadir una interacción al enlace de cierre dentro del modal.

Haremos clic en el enlace y luego le añadiremos una interacción.

Tal como hicimos con el botón de suscripción, queremos añadir una interacción que afecte al elemento del contenedor modal.

Añade las siguientes interacciones al primer clic:

Paso 1:

Escala: 1.1

Opacidad: 0%

Paso 2:

Visualización: Ninguna

Paso 10: ¡Eso es todo!

Lo que hemos hecho aquí es reproducir la interacción que creamos en la apariencia inicial del contenedor modal, ya que queremos que este enlace devuelva el contenedor modal a su estado original de invisibilidad.

¡Lo logramos! Si echas un vistazo en el modo de vista previa, deberías ver algo que funciona así:

Echa un vistazo a la ventana modal emergente en Webflow.