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.
At a dead end, would appreciate any help!
So far the most promising approach seems to be Ability to add cookie/session management for interactions/windows
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.
Designer from this tutorial (not helpful w/ js however as you can’t publish the embedded code): https://preview.webflow.com/preview/popup-how-to?preview=9e0ab8f33d480329f3d8b860080db47f
Old thread to show modal that now seems obsolete given the tutorial above: [Tutorial] How to create a modal/pop-up in Webflow