# 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](/sa5-modals/webflow-popups-and-modals/gating-modals.md) 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*](/overview/durations.md) ) Place on any element with the `wfu-modal-suppress` = `duration`. {% hint style="info" %} Duration uses a special string format. [Durations](/overview/durations.md) {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://attr.sygnal.com/sa5-modals/webflow-popups-and-modals.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.