Webflow Modals ❺🧪

PROTOTYPING Not yet available to the public

Goals

Near term;

• Content source

  • Define any DIV in your design as modal content, and make it possible to easily open a modal

    • Div can be visible or hidden

  • External URL such as a booking URL, in an IFRAME

• Auto scroll content if needed ( not for IFRAME? )

• Styling

  • Customizable scrollbar

  • Customizable modal - background color, rounded corners, border, padding

    • Possible min size and max size, or breakpoint-specific sizing

    • Max-height

  • Adjust overlay opacity, color, etc

  • Animation on open and close

  • Default classes applied

    • Option for a suffix to make a specific modal more specific

• Trigger modal display via

  • Attribute name

  • Attribute URL

  • Custom code

    • Internal SA5 Booking lib, composing a URL and then triggering the modal

• Restrict to a single modal open at a time

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

  • ? Allow override of the single-modal rule ?

• Built-in suppression

Medium term;

• Other page content on site, easily accessible for centralized modals

• CMS-driven modal content

  • e.g. dictionary definitions

• Trigger capability using SA5's ##link standard capability

• GTM Integration

• Trigger modal via

  • 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?

Long-term;

• Off-site content

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

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 be usable as content for a modal

wfu-modal = ( name )

Give your modal a unique name, which can be referenced.

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

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

Trigger	Notes	Type
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 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;

Suffix	Unit	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 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 ). open is the default setting.

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

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.

Modal appearance options

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