Future Attributes

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.

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.

Behavior	popup	modal
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 =

Close Options

• Close button

• Close clicking canvas

• Require button click ( modal )

• Successful form submit

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.

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 )

Freeze Page Scrolling

Prevent scrolling of the page while the modal is open.

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 )

wfu-modal-trigger-click

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.