Webflow Popups & Modals ❺πŸ§ͺ

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

BETA TESTING 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.

Popups v. Modals

What's the difference?

In SA5 docs we generally use the term "modals" to refer to either, but there are some important UX distinctions we want to preserve.

  • Popups generally contain non-critical information, and can be easily dismissed. Typical uses;

    • Special offers

    • Notices like holiday hours

    • Newsletter subscription forms

  • Modals generally contain critical information, and require specific user action to dismiss them.

    • Accept terms to proceed, like an over 18 gate

    • Gated content. Enter your email to continue reading the article

Initially Sygnal's focus will be on popup UX support, and we'll extend this to include modal behavior support as customer needs demand.

GDPR & cookie acceptance has its own special requirements, so we do not plan to build those types of capabilities into SA5 modals.

Roadmap

FeatureShort TermMedium TermFuture

Modal setup in the Webflow designer

2 DIVs

Possibly only 1 DIV, with auto-frame generation

Modal type

  • Popup. Easily closed.

  • Modal. Only a specific action can close.

Content source

  • Static content

  • CMS content

    • Named with zones

  • IFRAME

  • External source e.g. Google Doc

Modal frame styling

  • Borders

  • Corners

  • Padding

  • Shadows

  • Background

  • Transparency

  • Possible themes

Content admin

  • Designer

  • Content editor

Triggers ( open )

  • Trigger element click

  • Timed trigger

  • Trigger element scroll-into-view

  • Page scroll to %

  • Exit intent

  • Link triggers using SA5's ##link standard capability

  • JS

    • SA5 booking lib

  • Cookie exist / not-exist

  • URL formation e.g. #book

  • Adblocker detection

Triggers ( close )

  • Close button ( auto )

  • Close button ( manual )

  • External close trigger click

  • Timer

  • ESC key

  • Successful form submission

    • Delay? thanks... close

  • % Page scrolling?

  • Programmatic triggers, like an over 18 that checks birthdate calc

Suppression

Defined at the modal level

  • Possibly add sessionStorage as a suppression mechanism

  • Form submit suppression on success only

  • Possibly button-specific suppression ( for "never show again" )

Scrolling

Manually defined at the modal level via custom CSS chunk

  • Attribute with basic scrolling behaviors

  • Basic scrollbar style attributes

    • thin-black

Sizing

  • Defined at the modal frame level, responsively

  • Min size, max size

Positioning

Centered

9 positions

Animation on open / close

Simple predefined

  • slide in/out + direction

  • grow/shrink

  • fade in/ out

  • WF Interactions

Overlay

  • Simple predefined styling

  • Click triggers close

  • Themes

    • gray

    • glass

    • blur

  • Customizable ( as an element? )

  • Ability to suppress click on close

Timing

  • None

  • Schedule

    • Start / end dates

    • Weekdays

    • Hours of the day

  • Allow invocation override by a trigger to force show outside of scheduled times

Competition

  • None?

  • Restrict to a single modal open at a time

  • Auto close any prior modal if a new modal is open

  • Modal queue? Show sequentially.

  • Prioritization

    • High

    • Medium

    • Low

  • Non-critical v. critical- auto suppress non-critical if another has shown

Page behavior

  • None

  • Support no-scroll on page content behind the modal

  • Support scrolling as a trigger to close the modal

Analytics

  • None

  • GTM

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

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. 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.

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

hiding the modal in the designer

hiding the modal on load

closin

Advanced Notes

Multi-Function Modals

Buttons which perform an action and also close the modal?

  • Submit an email form

  • Accept terms

  • Confirm 18, etc.

Open / Close Animations

  • default show

  • grow from a point

  • slide in right

  • slide in left

  • slide in bottom

  • slide in top

  • spin in right

  • fade in

  • random, or a list of random CSV options

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. 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.

FUTURE. wfu-modal-zone or groups, to namespace CMS-bound modals, and site-wide modals

Define the type ( future )

  • popup ( default ) - means the modal can be easily closed

  • modal

Primarily this setting affects the default for various modal properties;

These distinctions and the behaviors they affect are under development, these names will likely change.

Behaviorpopupmodal

Close button wfu-close-button

auto - Auto-created

none - Not auto-created close button

Click overlay wfu-overlay-click

close - Closes the modal

none - Does nothing

Page scrolling wfu-page-scroll

allow - Scroll by default

prevent - No scroll by default

Hide the modal content

Needed?

wfu-modal-state = hidden

Place this on the same element as you have the wfu-modal attribute on. This ensures the modal is not visible when the page initially opens.

Test with new structure?

DESIGNER PRO TIP If you want to hide the modal content at design time, we recommend placing it at the bottom of the page, and then marking the modal element itself as

wrapping the modal in a DIV, which you mark as display: none. This will allow you to easily hide/show the modal in the designer to work on it.

Close Button

wfu-modal-close-button = auto

  • auto will create a close button if one is not already created in this modal

  • none means no close button, clicking the overlay is used for closing

    • Also used for modal mode? type =

I want this URL to be loaded in an IFRAME, as a named modal

This would be added on a modal element which is otherwise empty. Any existing content will be deleted.

wfu-modal-content-url = ( url )

  • A relative path wi

Things to consider;

  • Interactions, scripts, etc.

Usage Notes ( Modal Trigger Setup )

Some triggers, like timer and exit-intent triggers are defined on the modal directly. Others are defined on separate elements such as button elements.

SA5 supports both manual triggers automatic triggers.

  • Manual triggers are intentionally invoked by the user as part of the user flow, and will be invoked even if the user repeats that flow multiple times.

  • Automatic triggers occur outside of the user action, and should not occur again if the modal has already been invoked ( manually or automatically ).

TriggerNotesType

button

Triggers the modal when the user clicks on a button or other element that is tagged.

manual

form

Triggers the modal when the user submits a form.

manual

timer

Triggers the modal when a timer has elapsed, starting from page load.

auto

scroll

Triggers the modal when the page has been scrolled x%.

auto

scrollintoview

Triggers the modal when a certain element is scrolled into view.

auto

exit

Triggers the modal on exit intent.

auto

Multiple triggers can be applied to the same modal, for example, two button triggers, a timer, and a scroll trigger can all invoke the same modal. To support this, the attributes for each trigger type are discrete ( see below ).

? Consider trigger once rule

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.

wfu-modal-trigger-action = ( open | close | toggle )

Optional. If specified, it determines the action that occurs.

? Can be used with any trigger type? Scroll etc.

  • open ( default )

  • close

  • toggle

The purpose of this setup is to allow you to open a modal or close a modal from any element on your page.

I want my modal to automatically trigger on a timer

On the modal element itself, add this attribute;

wfu-modal-trigger-timer = ( wait duration )

Duration is specified in SA5's duration format, which is an integer followed by an optional unit of measurement, as follows;

SuffixUnit Examples

ms ( default )

Milliseconds

10000ms = 10 seconds 10000 = 10 seconds

s

Seconds

30s = 30 seconds

m

Minutes

20m = 20 minutes

h

Hours

4h = 4 hours

d

Days

3d = 3 days

w

Weeks

1w = 1 week

M

Months

2M = 2 months ( at 30 days per month )

y

Years

2y = 2 years ( at 365 days per year )

I want my modal to automatically trigger on an exit intent

This refers to the mouse leaving the browser window, which is thought to be leaving the site.

? Change this to on close or on navigation?

On the modal element itself, add this attribute;

wfu-modal-trigger-exit = ( no value needed )

I want my modal to automatically trigger on page scroll

Trigger the modal when the page scrolls a certain distance from the top, or a percentage of the total page height.

On the modal element itself, add this attribute;

wfu-modal-trigger-scrollpage = ( px | percentage )

For a more precise scroll trigger, see the scroll into view trigger.

I want my modal to trigger when this element is scrolled into view

On scroll into view;

? will hidden elements work, or only zero size elements

wfu-modal-trigger-scrollintoview = ( modal-name )

Pro Tips

Best Practices for Responsive Design

Set the width of the modal element as you want it to appear for each breakpoint.

Set a max-height on the content part to support scrollable content.

For modal sizing you can use most units, e.g. px, vh, vw, svh, svw, dvh, dvw units, but avoid %. The modal will be wrapped in a hidden container for layout purposes so % widths will be measured from the container, not the page.

Consider styling the scrollbar.

Designer Accessibility

If the modal is only on one page, you can place your modal(s) at the bottom of the page.

Wrap it in an "admin DIV" and set the DIV to display: none.

When you want to edit the modal content, simply change the DIV to display: block, and you'll see the content.

If the modal is on multiple pages,

  • Make it a component

  • Place the component in an "admin div"

If your clients will be editing the modal in the designer;

Place the modal component on a Style Guide page. Since it is not wrapped in the "admin DIV" there, it will be visible and editable.

If your clients will be editing the modal using the Content Editor;

Style Guide Page

Making modals accessible and editable is important, and one of the best ways to do this is to use a Style Guide page.

It's common to make Style Guide pages draft, so that they are not published as part of the site and do not appear in SERPs- however this (??) makes them difficult to access in the Content editor (verify??). Instead, you can password protect them.

Create a

If you are tur

  • Put your entire modal including the frame in a component, hidden

  • Put that comp

If your clients use the Content Editor, rather than the designer, you can make the modal accessible to them by;

  • Create a Style-guide folder

    • Password protect it

  • In it, create pages for the main stylistic elements of your site, e.g. Blog page, Modals, etc.

  • Drop your modal components on the modals page

Future

( modal-name ) | ( zone.modal-name )

name will target the first modal found with that name in the page.

zone.name will target the first modal found with that zone and name in the page

wfu-modal-target-zone = ( zone )

This is a convenience to separate the zone from the name. It's most oftenly used when the name is bound to a CMS slug, and the one needs to group those items separately from other modals in the page.

Scroll freeze option

Sound FX

Buttons?

For OK close separate from e.g. hyperlinks or other actions

Cancel?

Allow user to create these, or we default add a button?

Lets us separate content from popup

modal-button

modal-button-class

Support for Forms

wfu

Callback

On OK, Cancel

Common Configurations

Setup content for a modal, trigger with a button

Setup content for a modal, make it auto-trigger on page upen

Form modal, e.g. accept terms

Over 21 Gate

Last updated