TrinaW Posted December 13, 2023 Share Posted December 13, 2023 Hi there i need to create an age verification pop up. i have seen the guide on the help center. however, the URL when you click on the button pretty much is static and sends you back to the homepage. how can I have it set up so that the user will be returned to the page that they were already on, instead of popping up a new window with the home page? the reason i need this is sometimes we send links to customers for a particular product, but when they click the button on the pop up, it doesn't make sense that it sends them somewhere else. Link to comment
tuanphan Posted December 14, 2023 Share Posted December 14, 2023 Try this demo, I just created a few minutes ago from a code on Codepen: https://tuanphan3.squarespace.com/age-veri?noredirect pass: abc Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TrinaW Posted December 17, 2023 Author Share Posted December 17, 2023 @tuanphan looks like it should work! how can i apply that to my site? Link to comment
tuanphan Posted December 17, 2023 Share Posted December 17, 2023 Add this code to Website Tools (under Not Linked) > Code Injection > Footer <div id="age-verify"> <div class="window"> <span class="title">Are you over 18?</span> <span>To visit our website, you must be of legal drinking age.</span> <button class="yes" onclick="overAge()">Yes</button> <button class="no" onclick="underAge()">No</button> <div class="underBox"> <span class="title">Sorry!</span> <span>You need to be at least 18 to visit our website.</span> <button class="back" onclick="goBack()">Go Back</button> </div> <span> </div> </div> <style> #age-verify { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); transition: 500ms; } #age-verify .window { position: absolute; top: 50%; left: 50%; width: 400px; height: 250px; overflow: hidden; padding: 40px; margin-left: -200px; margin-top: -125px; background-color: #fff; border: 6px solid #ED6A5A; box-sizing: border-box; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); transition: 500ms; } #age-verify .window span { display: block; text-align: center; margin-bottom: 10px; font-family: "Source Sans Pro", sans-serif; } #age-verify .window span.title { color: #ED6A5A; font-size: 24px; } #age-verify .window button { border: 0; margin: 0; padding: 0; width: 48%; height: 60px; color: #FFF; font-size: 18px; background-color: #ED6A5A; margin-top: 20px; font-family: "Source Sans Pro", sans-serif; transform: scale(1); transition: 0.2s; } #age-verify .window button.back { display: block; float: none; margin: auto; background-color: #fff; color: #ED6A5A !important; margin-top: 20px; } #age-verify .window button.yes { float: left; } #age-verify .window button.no { float: right; } #age-verify .window button:hover { transform: scale(1.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); background-color: #f29488; } #age-verify .window .underBox { position: absolute; width: 400px; height: 250px; padding: 40px; top: 100%; left: 0; right: 0; background-color: #ED6A5A; transition: 500ms; box-sizing: border-box; } #age-verify .window .underBox * { color: #FFF !important; } #age-verify.hidden { opacity: 0; visibility: hidden; } #age-verify.hidden .window { transform: scale(0.5); } #age-verify.under .window .underBox { top: 0%; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> /* You'll probably want to drop a cookie so this doesn't pop up everytime. I'd reccomend this plugin: https://github.com/js-cookie/js-cookie */ overAge = function () { $('#age-verify').addClass('hidden'); } underAge = function () { $('#age-verify').addClass('under'); } goBack = function () { window.history.back(); } </script> <!-- From https://codepen.io/jonbp1993/pen/woKVbr --> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
popofglitter Posted July 3 Share Posted July 3 hi @tuanphan I tried this and the popup is only in the footer. is there any way I can get it to the top of the page, like in your demo? website: https://bagpipe-grasshopper-ybz6.squarespace.com password: cupcake Link to comment
tuanphan Posted July 3 Share Posted July 3 4 hours ago, popofglitter said: hi @tuanphan I tried this and the popup is only in the footer. is there any way I can get it to the top of the page, like in your demo? website: https://bagpipe-grasshopper-ybz6.squarespace.com password: cupcake Use this code under code you added <style> div#age-verify { z-index: 9999999 !important; } </style> popofglitter 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
popofglitter Posted July 3 Share Posted July 3 (edited) 5 hours ago, tuanphan said: Use this code under code you added <style> div#age-verify { z-index: 9999999 !important; } </style> hi @tuanphan That worked but the pop-up is showing up on every single page as you browse the site. Is there way to "remember" the user's selection, similar to promo pop-ups? Edited July 3 by popofglitter Link to comment
tuanphan Posted July 4 Share Posted July 4 18 hours ago, popofglitter said: hi @tuanphan That worked but the pop-up is showing up on every single page as you browse the site. Is there way to "remember" the user's selection, similar to promo pop-ups? If you want to make it appears on One Page only, you can move code to Individual Page Header Injection If you want it to only appear once and not show it again, add this code under <script> // Check if the animation state is stored in sessionStorage const isAnimationPlayed = sessionStorage.getItem("animationPlayed"); // Reference to the splash-wrapper div with a specified ID const splashWrapper = document.getElementById("age-verify"); // If the animation has already played, hide it and remove it from the DOM if (isAnimationPlayed) { splashWrapper.style.display = "none"; splashWrapper.remove(); // Remove the splash wrapper from the DOM } else { // If the animation hasn't played yet, mark it as played and store it in sessionStorage sessionStorage.setItem("animationPlayed", "true"); } </script> If you want more options like Promotional Popup, you can consider using custom tool, like this Age Verification (referral link, you can choose free version). popofglitter 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment