How to make sign up modal appear only once per visit or once per user

Design help Custom code
1

Every time the homepage is loaded the sign-up form modal (takeover) reappears… How do I make it only appear once either after initial load or after the user has signed up or closed out… What is the code to set a cookie and where to insert it? Any and all help is greatly appreciated. Cheers!

Here is my public share link: https://preview.webflow.com/preview/into-me-sea?utm_medium=preview_link&utm_source=designer&utm_content=into-me-sea&preview=9248fd971b5961857087322673312523&mode=preview
(how to access public share link)

1 Like
2

I tried @vincent method here: Show a popup based on a cookie — Free clonable template and I just can’t get it to work…

1 Like
3

Hey Blake,

I wrote a some code snippets for another user that you might find helpful! It uses Local Storage instead of a cookie, so there is that difference to take note of. However, the end result is incredibly similar.

See here:

3 Likes
4

Actually, so as not to over-complicate things, Vincent’s method works well so long as you integrate the code correctly. Where is your custom code from Vincent’s project? You’ll either have to swap out the custom JS snippet with the class name of your modal wrapper OR give your modal wrapper a class name of popup-overlay. Then Vincent’s solution should work!

Let me know if you need help with any of this!

2 Likes
5

Thanks for your response @mattvaru I just placed Vincents code back in and updated the class with ModalWrapper… I’m still not seeing any results… ( I noticed Vincents code has “.” before his class name .popup-overlay do I need this or not?) If you wouldn’t mind taking a look and advising I’d appreciate it greatly. Cheers!

6

Hmm, I see that it’s not working as intended. I’ll take a look and see if I can figure it out. To answer your question though, you would need the . before the class name, but I can see that you’ve updated your JS to reflect that, so that shouldn’t be the issue.

1 Like
7

Can you set your ModalWrapper class to display:none? (I suspect this is the reason)

8

Done, but now the pop up doesn’t even open… I opened the url in a private session window incase this makes a difference with the cookie being stored…

9

Man! Hmm… Can you try changing your class name in the JS snippet from .ModalWrapper to .modalwrapper? Maybe case-sensitivity plays a part here. (Make sure you still leave the ModalWrapper class’s display setting to display:none.)

10

I see that it works but now the modal appears all funky.

To fix this, change:

$('.modalwrapper').show();

to:

$('.modalwrapper').css('display', 'flex');

The difference here is that the .show() method sets the element to display:block by default instead of display:flex like you probably had the modal set up. After you make this change, you should be set!

2 Likes
11

I think that did, thanks so much!

1 Like
12

Hey mattvaru,

I wonder if you know how I would go about making this work for only one page within my site. I.e the about page for example.?

Thanks in advance

13

Hi all - I tried to implement Vincent’s tutorial and changed my modal wrapper name to ‘modalwrapper’ & updated the custom code accordingly but I can’t seem to get it to work.

My pop-up occurs in my blog/journal CMS pages and I’m adding in the custom code at the bottom of the designer where it says “Blog Posts Template”.

You’ll see my modal inside a symbol called Pop Up but when I click on the symbol to edit it, the modal itself is now called “modalwrapper”

Is this an issue because it’s within a symbol? Am I using the wrong Div?

My pop up still works but it’s getting hella annoying that it displays with every refresh. Thanks so much! Webflow - Soapbox Project