# Webflow Popups & Modals In Webflow, building popups and modals has several challenges; * Editing them is not designer-friendly * There is no suppression feature to allow snoozing * Triggers are limited * They're very reliant on interactions * Behaviors are difficult to control, e.g. close only if terms are accepted SA5's provides a Webflow-centric JS-based modal solution that resolves all of these issues. ## Demonstration {% embed url="" %} Demonstration {% endembed %} {% embed url="" %} Cloneable {% endembed %} ## Use Cases * Display a cancellation policy section on your page * Then invoke it in other places on your page as a scrollable modal * E.g. in your booking form at the bottom, a reminder about the cancellation policy * Invoke an external resource such as a booking form * Prevent progress without acceptance? * Form submission * All validation checks confirmed, but we want an I agree on the privacy policy or cancellation terms, etc. * Login / sign-up / password page * Automatic on site visitation? I am over 18? * I agree... * Content gating? * Login or email * Email / lead capture * Anti-Adblocker ## Modal Structure A modal typically has 4 identifiable parts; * **Modal frame.** The outer frame of the modal, which dictates the frame styling ( corners, border, shadow ) sizing and padding. This is the center of the modal and defines most settings of the modal. * **Modal content** ( optional )**.** The content of the modal. Dictates any scrolling and scrollbar behavior of the content area itself. * **Close button** ( optional ). Will be auto-generated if unspecified * **Overlay** ( automatic ). The background that covers the page to make the modal more visible. * **Sidebar** ( optional ). Used to provide visual artwork that is distinct from the scrollable content area. In your HTML DOM the structure is arranged like this; ``` DIV wfu-modal = ( name ) DIV wfu-modal-button = close ( optional ) DIV wfu-modal-sidebar ( optional ) DIV wfu-modal-content .. modal content ``` * The `wfu-modal` DIV is required, it defines and names the modal. * The `wfu-modal-content` is optional, but important to controlling content scrolling. * The `wfu-modal-sidebar` is optional. Does it need an attribute? * The `wfu-modal-button` is optional. It will be auto-created as an X if it does not exist ## Modal Lifecycle SA5 Modals are designed to be flexible, but there is a typical lifecycle; * Closed ( pending ). This is generally the initial state of a modal for a new user visiting the site, it is not suppressed, but it is also initially hidden. * Open. Some trigger has occurred like click, timer, scroll, exit intent, which open the modal. * When the user closes it, it can be configured to suppress so that it won't auto-open again for e.g. 3 days * Closed ( suppressed ). It's closed and a natural trigger such as a timer won't re-open it. {% hint style="success" %} In some situations, you may also want to be able to re-open the modal even when it is suppressed. This scenario is common when you want a modal to automatically open ( e.g. on a timer ), but then allow the user to manually re-open it later by clicking a link. This is supported by SA5. {% endhint %} Here's a state diagram; ## Usage Notes ( Modal Setup ) Create your DIV containing your modal content, and apply the attributes below, depending on the configuration and behavior you choose; ### `wfu-modal` = ( *name* ) **Required.** Place this on the DIV you want to be a **modal element**. Give your modal a unique name, like `modal-1`. This will be used in places like your modal trigger buttons. {% hint style="info" %} Use standard identifier conventions, e.g. avoid spaces. We recommend names that use only lowercase letters, hyphens, and numbers. {% endhint %} {% hint style="info" %} You can use a CMS-bound value such as a slug for the name. Just ensure it is also unique from any other modals on the page to prevent naming conflicts. {% endhint %} ## Usage Notes ( Modal Trigger Setup ) There are many different ways to trigger a modal open. Depending on the type of trigger, these attributes will be placed either on a triggering element, or on the modal element itself. ### I want this button or element to trigger my modal on click On the button or element to be clicked, add this attribute; `wfu-modal-trigger-click` = ( modal-name ) Specify the modal's name that you want to open. ### I want the modal to appear after X milliseconds Triggers the modal when a timer has elapsed, starting from page load. Place this directly on the modal element. `wfu-modal-trigger-timer` = ( time in milliseconds ) {% hint style="info" %} 1 second = 1,000 ms, so if you want to wait 5 seconds, set the value to `5000`. {% endhint %}
TriggerTrigger TypeAttribute ValueNotes
ClickDirectwfu-modal-trigger-click Modal namePlace on the triggering button, link, or element
TimerIn-Directwfu-modal-trigger-timer Time in millisecondsPlace on the modal element directly
{% hint style="success" %} This is being combined with SA5 Trigger. \ Event = open modal\ Action {% endhint %} {% hint style="info" %} **GATED MODALS** SA5 has a special modal trigger configuration referred to as a "gate." In this setup, when the user attempts to follow a link or display a modal, another modal can be presented and must be completed before the user's action can proceed. Learn more about [Gated Modals](https://attr.sygnal.com/sa5-modals/webflow-popups-and-modals/gating-modals) here. {% endhint %} ## ## Usage Notes ( Modal Suppression Setup ) After a modal is closed, we will likely want to suppress it for some period of time. ### `wfu-modal-suppress` = ( *suppression setting* ) **Optional.** Place; * On the `wfu-modal` element. * On any element with `wfu-modal-close` button Values; * `forever` - suppresses indefinitely * `session` - suppresses only for the duration of the webstorage session * `duration` - suppresses for a specific duration * Use the `wfu-modal-suppress-duration` attribute to specify the duration. * `none` - no suppression Note that the suppression is handled using a cookie-based or web-storage-based suppression key which includes the name of the modal. If you ever change the name of the modal, and republish your site, any existing suppression keys would be ignored. {% hint style="success" %} The defined suppression state on the modal is applied immediately after the modal is opened. This ensures that it is honored regardless of how the modal is closed- including a CTA button navigation within the modal. {% endhint %} ### `wfu-modal-suppress-duration` = ( [*duration*](https://attr.sygnal.com/overview/durations) ) Place on any element with the `wfu-modal-suppress` = `duration`. {% hint style="info" %} Duration uses a special string format. [Durations](https://attr.sygnal.com/overview/durations) {% endhint %}