SA5 Modals Roadmap & Future

Roadmap

Feature	Short Term	Medium Term	Future
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
Modal namespaces		Likely to add for CMS-driven modal support

Advanced Notes

Controller Integration

On open, close, etc, the modal or triggers invoke the action and the modal is the first responder, however the controller is informed and queried on some actions.

For example, a modal opening at 5000ms and then a different one opening at 8000ms might not be legit. Or a modal opening on a timer, and then a scroll trigger, and then an exit-intent trigger...

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

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

Things we're considering;

JS API;

• Invoke, suppress modal from script

• Open event, close event