Webflow Popups & Modals

Easily create and manage popups and modals in your Webflow projects.

BETA RELEASE SA5 Modals is fully available, but attributes and features may change in the final release. Drop a message in the forum if you'd like to join the beta team.

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

Form Select Elements

Demonstration

SA5 Modals Library - WebflowSA5 Modals Library

Cloneable

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 )

• Open

• Closed ( suppressed )

In a typical setup there is a lifecycle;

• Closed ( pending )

• Opened, by trigger ( user button click, timer trigger, scroll to position, etc

• Closed ( suppressed )

In some situations, you may also want to be able to re-open the modal, which can be allowed by user click even when the modal is suppressed to automatic triggers

Usage Notes ( Modal Setup )

Create your DIV containing your modal content, and apply the attributes below, depending on the configuration and behavior you choose;

I want this DIV to define a modal

wfu-modal = ( name )

Give your modal a unique name, like modal-1. This will be used in places like your modal trigger buttons.

Use standard identifier conventions, e.g. avoid spaces. We recommend names that use only lowercase letters, hyphens, and numbers.

Any DIV you apply the wfu-modal attribute to is referred to as a modal element, for the configuration docs below.

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.

Usage Notes ( Modal Trigger Setup )

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.

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 )

1 second = 1,000 ms, so if you want to wait 5 seconds, set the value to 5000.

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 )

• forever - suppresses indefinitely

• session - suppresses only for the duration of the webstorage session

• FUTURE - we'll add specific durations

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.

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.