I’m trying to create a modal dialog that presents when the user’s mouse leaves the page, and then only once for that user. This is a common design pattern, as seen at sites like https://x.ai/ and many others.
I was able to create the modal and get the behaviour I needed by following the modal tutorial (reference 1 below) and then adjusting the appearance interaction to instead be on hover out from a top level div that wraps everything (Settings > Edit Trigger Hover > check Affect different elements and then put in the ID of the top div).
It works but is only half of the story: once the user enters their email and it closes I don’t want it to appear again, at least for this session but ideally never for this user.
Anyone able to help with this? I expect it’ll require some custom javascript code to set a flag that needs to be checked, but I can’t see how to then incorporate that flag into the transition effect.
However, it doesn’t work as setting visibility none on the element doesn’t stop the mouseout event from setting it back to block again. My best guess is that we’d need the script to change the element ID so that the effect can’t find it again to show even if it fires, but I haven’t been successful in making this work. Better would be a way to disable the interaction itself, but not sure how to go about that.
At this point, you could cheat. To the button that sends/closes the modal, you could add another behavior, like a 0px dimensions to the modal, or make the trigger element (the one that catches the mouse going out) disappear (it would be a fixed div on top, a transaprent dummy object) hence the modal never being triggered again… etc
See where I’m going with this? Just a clever way to make the modal invisible or to make the trigger vanish… (I prefer the latter)
In a general way, I always use dummy elements to trigger my interactions, so I can place them where I want and also make them move or disappear.
Thanks! Tried out the second (which sounded preferable to me too) but the fixed transparent div on top interferes with page interactions, i.e. doesn’t allow links in content underneath to be clickable. It also fires the trigger when if you hover over a video or other element that has a high enough z-index to punch though the div (solvable, but brittle).
Will try the first again but initially the issue with that one was that 0px is the default state for the modal anyway to support a transition effect. Don’t love the idea of having triggers happen on invisible elements, but will report back if it works.
Is there a known way of using javascript to just disable an interaction? If so that would be ideal (combined with the javascript referenced in the first link above).
This is an industry standard when it comes to controlling motion and interactions. Trigger is disconnected from target. Dummies elements are used in 3D and 2D animation post production all the time. The good practice is to either nest inside a dummy or place a dummy in the flow of elements, or have a dummy floating where you need it. It’s actually a cleaner way to do things.
Got to something that works based on Vincent’s suggestion - used an outer dummy wrapper, say “Modal wrapper wrapper”, and made the Close link set visibility on that to none, whereas it was always visible at the beginning but its child “Modal Wrapper” is hidden & is made visible when mouse leaves. Thanks!
Still open, however, to improved solutions as this doesn’t do everything desired: currently the modal appears once per current page load, ideally we would show once for this user/session (implying a cookie based approach).
Is there a way to set this site wide rather than per page? With GDPR I’m hoping to have one consent to use pop up no matter which page on the site they start from, and then once they accept have it not pop back up again. Is that possible?