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!
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.
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!
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!
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.
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.)
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!
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