Pop up with button that returns you to the page you're on

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. 

Try this demo, I just created a few minutes ago from a code on Codepen: https://tuanphan3.squarespace.com/age-veri?noredirect

pass: abc

@tuanphan looks like it should work! how can i apply that to my site?

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 -->

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

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>

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?

 

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

thank you @tuanphan!