add cookie show the pop up just one timeshow pop up only once throughout one navigation of the siteWhat is the best way to add options to a select from as a JS object with jQuery?Add table row in jQueryHow do I add a class to a given element?How can I add a key/value pair to a JavaScript object?How do I set/unset a cookie with jQuery?How can I add new array elements at the beginning of an array in Javascript?Open submenu only after click on parentHow can I insert html code inside a javascript value?how to add this jquery script in to wordpress websiteKalendar-vue with webpack: “You may need an appropriate loader to handle this file type.”Hi
Why are Gatwick's runways too close together?
How to describe accents?
Loading military units into ships optimally, using backtracking
These were just lying around
Why is there a large performance impact when looping over an array over 240 elements?
How can God warn people of the upcoming rapture without disrupting society?
When were the tantalum capacitors first used in computing?
What is a good class if we remove subclasses?
A Non Math Puzzle. What is the middle number?
Why did I get only 5 points even though I won?
How do some PhD students get 10+ papers? Is that what I need for landing good faculty position?
Is it okay for a ticket seller in the USA to refuse to give you your change, keep it for themselves and claim it's a tip?
How are you supposed to know the strumming pattern for a song from the "chord sheet music"?
Solution to German Tank Problem
How can Radagast come across Gandalf and Thorin's company?
A continuous water "planet" ring around a star
If a digital camera can be "hacked" in the ransomware sense, how best to protect it?
Do I have to cite common CS algorithms?
TEMPO: play a sound in animated GIF/PDF/SVG
Graphs for which a calculus student can reasonably compute the arclength
What does the phrase "pull off sick wheelies and flips" mean here?
How does "Te vas a cansar" mean "You're going to get tired"?
What gave Harry Potter the idea of writing in Tom Riddle's diary?
Heat equation: Squiggly lines
add cookie show the pop up just one time
show pop up only once throughout one navigation of the siteWhat is the best way to add options to a select from as a JS object with jQuery?Add table row in jQueryHow do I add a class to a given element?How can I add a key/value pair to a JavaScript object?How do I set/unset a cookie with jQuery?How can I add new array elements at the beginning of an array in Javascript?Open submenu only after click on parentHow can I insert html code inside a javascript value?how to add this jquery script in to wordpress websiteKalendar-vue with webpack: “You may need an appropriate loader to handle this file type.”Hi
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
2
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 :)
javascript
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
add a comment |
2
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 :)
javascript
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
Possible duplicate of show pop up only once throughout one navigation of the site
– mjwatts
Mar 27 at 9:38
add a comment |
2
2
2
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 :)
javascript
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
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 :)
/*
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>/*
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>javascript
javascript
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
edited Mar 27 at 19:47
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
600k135 gold badges1149 silver badges1285 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
asked Mar 27 at 9:30
Rezan RasoulRezan Rasoul
132 bronze badges
132 bronze badges
Possible duplicate of show pop up only once throughout one navigation of the site
– mjwatts
Mar 27 at 9:38
add a comment |
Possible duplicate of show pop up only once throughout one navigation of the site
– mjwatts
Mar 27 at 9:38
Possible duplicate of show pop up only once throughout one navigation of the site
– mjwatts
Mar 27 at 9:38
Possible duplicate of show pop up only once throughout one navigation of the site
– mjwatts
Mar 27 at 9:38
add a comment |
1 Answer
1
active
oldest
votes
0
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>edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
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 at 10:28
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior.
– Andam
Mar 27 at 11:56
Thanks, it works :)
– Rezan Rasoul
Mar 27 at 12:07
@RezanRasoul Np, good luck
– Andam
Mar 27 at 12:14
1
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000));
– Rezan Rasoul
Mar 27 at 14:24
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55373804%2fadd-cookie-show-the-pop-up-just-one-time%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
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 at 10:28
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior.
– Andam
Mar 27 at 11:56
Thanks, it works :)
– Rezan Rasoul
Mar 27 at 12:07
@RezanRasoul Np, good luck
– Andam
Mar 27 at 12:14
1
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000));
– Rezan Rasoul
Mar 27 at 14:24
|
show 2 more comments
0
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>edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
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 at 10:28
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior.
– Andam
Mar 27 at 11:56
Thanks, it works :)
– Rezan Rasoul
Mar 27 at 12:07
@RezanRasoul Np, good luck
– Andam
Mar 27 at 12:14
1
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000));
– Rezan Rasoul
Mar 27 at 14:24
|
show 2 more comments
0
0
0
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>edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
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>/*
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>/*
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>edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
edited Mar 27 at 19:46
marc_s
600k135 gold badges1149 silver badges1285 bronze badges
600k135 gold badges1149 silver badges1285 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
answered Mar 27 at 9:42
AndamAndam
1,0011 gold badge3 silver badges19 bronze badges
1,0011 gold badge3 silver badges19 bronze badges
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 at 10:28
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior.
– Andam
Mar 27 at 11:56
Thanks, it works :)
– Rezan Rasoul
Mar 27 at 12:07
@RezanRasoul Np, good luck
– Andam
Mar 27 at 12:14
1
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000));
– Rezan Rasoul
Mar 27 at 14:24
|
show 2 more comments
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 at 10:28
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior.
– Andam
Mar 27 at 11:56
Thanks, it works :)
– Rezan Rasoul
Mar 27 at 12:07
@RezanRasoul Np, good luck
– Andam
Mar 27 at 12:14
1
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000));
– Rezan Rasoul
Mar 27 at 14:24
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 at 10:28
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 at 10:28
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior.
– Andam
Mar 27 at 11:56
@RezanRasoul I have modified the answer. check it again and see if that is the expected Behavior.
– Andam
Mar 27 at 11:56
Thanks, it works :)
– Rezan Rasoul
Mar 27 at 12:07
Thanks, it works :)
– Rezan Rasoul
Mar 27 at 12:07
@RezanRasoul Np, good luck
– Andam
Mar 27 at 12:14
@RezanRasoul Np, good luck
– Andam
Mar 27 at 12:14
1
1
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000));
– Rezan Rasoul
Mar 27 at 14:24
I think I solved it by adding a new var var minutes = 30; d.setTime(d.getTime() + ( minutes * 60 * 1000));
– Rezan Rasoul
Mar 27 at 14:24
|
show 2 more comments
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55373804%2fadd-cookie-show-the-pop-up-just-one-time%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of show pop up only once throughout one navigation of the site
– mjwatts
Mar 27 at 9:38