Check and Set cookie
check if a cookie exists, if not set a cookie that expires after 60 days
HTML
<div id="newsletter-popup" class="hide col-xs-4 col-md-3 col-lg-2">
<p>Receive your FREE information pack and a complimentary newsletter now</p>
<a class="btn cc" href="#" role="button">sign up</a>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
CSS
.hide {
display:none;
}
#newsletter-popup {
position:fixed;
bottom:0;
right: 40px;
background: rgba(200,200,200,.9);
z-index:99999;
padding:20px;
border: 1px solid #bbb;
box-shadow: 1px 5px 5px #ccc;
}
#newsletter-popup .close {
top: 5px;
right: 10px;
position:absolute;
cursor:pointer;
}
@media (max-width:768px){
#newsletter-popup {
display:none;
}
}
JavaScript
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.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 "";
}
function checkCookie() {
// so the markup will have the popup, but will have the hide class
var firstTime=getCookie("first_time");
if (firstTime == "" || firstTime == null) {
//remove the hide class
$("#popup").removeClass("hide");
setCookie("first_time", "1", 60);
}
}
$(".close").click(function(){
$("#newsletter-popup").addClass("hide");
});
checkCookie();