I am trying to create an overlay window that covers the entire screen the first time a visitor comes to the site and it simply asks them if they are over the age of 21. If they click the button that says ‘yes - I am over 21’ then the overlay goes away. If they click ‘no - I am younger than 21’ then it redirects to a page saying they are too young for the content of this site.
This overlay needs to pop up no matter what page they enter the site from and should only ever popup once per session.
Is there a solution that works well with Webflow? I created a page (the one titled Age Gate) that has the layout on it so I could see what I wanted it to look like. Initially I had thought of just setting it as the home page but that only works if the user enters from the base url.
This can easily be done within Webflow with interactions and without any custom code. However, for the website to remember the option the user clicked it would require custom code.
Here is a tutorial how to create such a pop up modal:
This script is working by saying "if the thing with an ID of “splash” is not here, then show the thing with a class of “splash_section”, then it sets the thing with an ID of “splash” as “true” in session storage, so the next time the script runs (you’ll put it in your sitewide “footer code” section within the site settings) it won’t won’t run beyond the first line because it has been set to “true”, (until the next time the person closes out their browser and comes back)…
How to use it:
Create your overlay, pop-up, or whatever the thing is. Put it in its own wrapper at the very top of your site structure - I’ve included a quick screenshot below to illustrate what I mean. You’ll give it BOTH a class of splash_section AND an ID of splash. Or… you can modify the class/ID setup in the script below to suit your class/ID names.
In your case, make it a Webflow symbol so you only have to make changes on one page if needed, and put it at the top of every page of your site that you are worried somebody might sneak into as a minor
Put this script in the footer section of your Custom Code section, within your site settings. Don’t forget to wrap it in script tags…
jQuery(document).ready(function($){
if (sessionStorage.getItem('splash') !== 'true') {
$('.splash_section').show()
sessionStorage.setItem('splash','true');
}
});
Disclaimer: I’m not proficent in javascript or jquery… this is just a modified script from a solution of found somewhere on the internet… I have no more info or knowledge to offer beyond this.