Dismissible Elements
Automatically suppress your Webflow modals, popups & more after the user closes them for a specified number of days.
Last updated
Automatically suppress your Webflow modals, popups & more after the user closes them for a specified number of days.
Last updated
Important, the attributes on this feature are likely to change as we complete development on the new modals feature. We'll retain the "dismiss-only" feature, but it may change names to e.g. wfu-dismiss
This feature enables you to easily "close" and suppress UI elements so that they will not appear for a specified number of days, even on page reload.
It's primarily used for;
Alert banners
Notices
Interactions ( IX2 )-based modals & pop-ups
But can be used for any elements that you want to suppress.
Suppress a notification element
Suppress an interactions-based modal popup
Suppress a CTA or other banner
This library simplifies dismissable elements into two parts-
The dismissable element itself, which can be any popup, DIV, or other element
Close button element(s), such as a corner "X" or a "Close" button. These must be positioned within the dismissable element as descendants.
To implement this, design your elements, alerts, modals or CTAs however you like.
The close functionality will be an element with a special custom attribute on it. When closed, SA5 will remove the element from the DOM, and suppress it for as long as you've requested.
In Webflow, modals are commonly "closed" using an interaction. It may include fade-out, slide-out, or spin-off-screen effects. SA5 simply deletes the element outright, so those exit animations would not be seen, the modal will simply disappear.
Once your elements are setup as described in Usage Notes, you can apply the attributes.
First, add the library as detailed in Quick Start.
To the outermost element you want to suppress;
Add a custom attribute of wfu-modal = ( name ). Give it any custom name you like. That name will be used in the suppression tracking so you can e.g. have the same modal on every page, and suppress it site-wide.
Add a custom attribute of wfu-modal-trigger = load.
Add the suppression duration you want, using wfu-modal-suppress-days = ( days ). If unspecified, defaults to about 1 year.
To the close element(s) within the modal;
Add an attribute of wfu-modal-close = true
Add an attribute of wfu-modal-close-type = auto
Repeat this process for any number of elements you want.
The name you specify is site-wide, so all elements with the same name will be suppressed. Use this to suppress an announcement banner-site wide, or even to suppress several variations of the same banner that might appear throughout the page.
wfu-modal-action = open | close
wfu-modal-action-method = auto | interaction
wfu-modal-action-trigger = click | timer | scroll | exit
wfu-modal-action-trigger-ms = 10000
Visit the SA5 forum link at the top of this page.
