Man, where did that call to localStorage come from?
I see that it was in the code I quoted in post#24 - I didn’t notice it. Sorry about that.
Anyway, as we said before, if you want to have the popup appear every 30 days or so, then you can set a cookie and have it expire after the desired period of time. You don’t need localStorage.
The reason you were seeing the popup again and again is that you set the expires attribute to 1.
You’ll need to set it to 30.
Also, I’m not sure if this might have been causing an issue, but I changed the cookie value from true to “true” (the first had no quotes).
And finally, the markup for your popup may be problematic.
You had:
<a id="close" style="text-decoration: none; color: #fff;">
<div id='disclclose'>
<b>I Agree</b>
</div>
</a>
Although HTML5 allows <a> elements to contain block elements (like divs), running your page through the W3C validator produces 256 errors and 107 warnings, so I changed the markup slightly.
Here’s the revised code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disclaimer exampel</title>
<style>
/* disclaimer (pop-up window) */
#disclhead {
text-align: left;
border: 1px solid #FF5500;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
background: #007800;
background: -moz-linear-gradient(#00dd00, #007800);
background: -webkit-linear-gradient(#00dd00, #007800);
background: -o-linear-gradient(#00dd00, #007800);
font-size: 20px;
width: 378px;
color: white;
}
#disclclose {
text-align: center;
border: 1px solid #007800;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 3px;
background: #FF8D54;
background: -moz-linear-gradient(#FF8D54, #BC4001);
background: -webkit-linear-gradient(#FF8D54, #BC4001);
background: -o-linear-gradient(#FF8D54, #BC4001);
font-size: 16px;
color: #fff;
display: block;
width: 98%;
cursor: pointer;
}
#disclclose:hover {
background: #007800;
background: -moz-linear-gradient(#00dd00, #007800);
background: -webkit-linear-gradient(#00dd00, #007800);
background: -o-linear-gradient(#00dd00, #007800);
}
#overlay{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity:.80;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
z-index:1001;
}
#announcement{
display: none;
position: absolute;
width: 400px;
padding: 0 16px;
border: 2px solid #007800;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #fff;
padding: 10px;
text-align: justify;
font-size: 12px;
z-index:1002;
}
#announcement p{
margin: 10px 5px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="announcement">
<div id='disclhead'>Terms of use</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...
</p>
<a id="disclclose">I Agree</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ciupercomania.googlecode.com/svn/trunk/jquery.cookie.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
jQuery.fn.center = function () {
var w = $(window);
this.css("position", "fixed");
this.css("top", Math.max(0, ((w.height() - $(this).outerHeight()) / 2) + w.scrollTop()) + "px");
this.css("left", Math.max(0, ((w.width() - $(this).outerWidth()) / 2) + w.scrollLeft()) + "px");
return this;
}
var hasSeenTerms = $.cookie("terms");
if (!hasSeenTerms) {
setTimeout(function () {
$('<div id="overlay"></div>').appendTo('body');
$("#announcement").fadeIn('slow').center();
}, 500);
}
$("#disclclose").on("click", function(e) {
$.cookie("terms", "true", { expires: 30, path: '/' });
$("#announcement").remove();
$("#overlay").remove();
e.preventDefault();
});
});
</script>
</body>
</html>
And here’s a demo.
HTH
I tested it on IE 8 and it works fine 
