Preventing modal from reappearing after first visit

Design help Custom code
1

I’m encountering an issue with a modal on my Webflow site and would appreciate your help.

What I’m Trying to Achieve:

I want a modal to appear only the first time a user visits the site. If they close it, it shouldn’t show up again on subsequent page loads or visits to other pages. I’m using local storage to track this, but it’s not working as expected.

Here’s What I’ve Done So Far:

  1. Default State:

• I’ve ensured the modal is hidden by default from the Webflow designer.

  1. JavaScript Implementation:

• Here’s the script I’m using to control the modal behavior:

3. Testing and Debugging:

• I’ve checked that the local storage value is being set correctly when the modal is closed.

• However, the modal still shows up every time the page is loaded, ignoring the local storage setting.

The Issue:

Even though local storage indicates the modal has been shown, the modal continues to display on every page load. It seems like the interaction is always triggering regardless of the local storage value.

How You Can Help:

I’d appreciate any advice or suggestions you have to fix this issue. Specifically, I need help ensuring the modal shows only once per user session and doesn’t reappear after being closed.

Here is the preview link to the Webflow project for your reference.

2

When I want JS to suppress an interaction-triggered element like a modal, I take one of two approaches;

  • Suppress by deleting the element. If you remove it from the DOM, it can’t trigger.
  • In other cases it makes sense to instead trigger the interaction itself from script ( by script-clicking an button interaction trigger ). Then you are in full control of when the interaction is triggered.
3

Hey!!

I just made a script for this - add one script and one attribute on the element you want to only show up once, and it will all work as it should.

Hope this helps!!