add cookie show the pop up just one time

Question

I have a homework and I need help to fix it I have a pop up code HTML

/*
You'll probably want to drop a cookie so this doesn't pop up everytime. I'd recommend 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();
}

#age-verify {
  position: fixed;
    z-index: 9997;
  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;
  z-index: 9998;

}
#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;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: .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 {
  -webkit-transform: scale(1.1);
          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 {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
#age-verify.under .window .underBox {
  top: 0%;
}

<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="parent.location='https://www.google.dk/'">Go Back</button></div>
<span> </span></div>
</div>

I want to add cookie show the pop up just one time at on load and cookie expire at one hour

I tried this many article but may i did know how can i set it with right way

https://www.thepolyglotdeveloper.com/2018/02/create-email-subscription-popup-jquery/

Can Any one solve it for me :)

Possible duplicate of [show pop up only once throughout one navigation of the site](https://stackoverflow.com/questions/22755128/show-pop-up-only-once-throughout-one-navigation-of-the-site) — user115014, Mar 27 '19 at 09:38

score 0 · Accepted Answer · edited Mar 27 '19 at 19:46

You can use these 2 functions I added at the end of the code to get and set cookies. the cookie expires as you said in 60 minutes. When the page load we check if we can get the cookie we want. if we can then we hide the popup other wise it will be shown.

/*
You'll probably want to drop a cookie so this doesn't pop up everytime. I'd recommend this plugin:
https://github.com/js-cookie/js-cookie
*/

if(getCookie("age") != "")
{
$('#age-verify').addClass('hidden');
}
overAge = function () {
  setCookie("age", "overAge");
  $('#age-verify').addClass('hidden');
}

underAge = function () {
  $('#age-verify').addClass('under');
}

goBack = function () {
    window.history.back();
}

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

#age-verify {
  position: fixed;
    z-index: 9997;
  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;
  z-index: 9998;

}
#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;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: .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 {
  -webkit-transform: scale(1.1);
          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 {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
#age-verify.under .window .underBox {
  top: 0%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="parent.location='https://www.google.dk/'">Go Back</button></div>
<span> </span></div>
</div>

Hello Andam, the code you add works with javascript but the problem is the code works with both button, yes and no, so how can I add the coockie just when he click yes button? — Rezan Rasoul, Mar 27 '19 at 10:28
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior. — Andam, Mar 27 '19 at 11:56
Hello again, but I want to ask about, why the cookie reset after 1 min? However you set 60*1000, but after 1 min the popup shows again. you can preview it her www.infinity-shisha.dk — Rezan Rasoul, Mar 27 '19 at 14:17
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000)); — Rezan Rasoul, Mar 27 '19 at 14:24
@RezanRasoul correct I should have wrote 60 * 60 * 1000 to be one hour — Andam, Mar 28 '19 at 05:51

add cookie show the pop up just one time

1 Answers1