JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
<div id="topmessage">
<a href="#" class="close" id="close">Close</a>
Hi welcome back, if you have any questions please feel free to <a href="/contact">contact me</a>.
</div>
<div id="debug"></div>
CSS
#topmessage {
display: none;
border: 4px dashed red;
background: yellow;
margin:10px;
padding:10px;
}
#close {
float:right;
}
JavaScript
var value = $.cookie('the_cookie'),
isNewSession = $.cookie('is_new_session') != 'false',
date = null;
if (isNewSession) {
// set cookie for next visit during this session
debug("new session!");
$.cookie('is_new_session', 'false', { path:'/' });
}
debug("cookie value = " + value);
if (value == "never again") {
// nothing to do
} else if (/^\d+$/.test(value || "")) {
date = new Date();
date.setTime(value);
debug("date from cookie = " + date);
var today = new Date();
if (date.getDate() != today.getDate() ||
date.getMonth() != today.getMonth() ||
date.getYear() != today.getYear()) {
// date is other than today
$('#topmessage').delay(1000).slideDown(400);
$("#close").click(function(e) {
$("#topmessage").slideToggle(400);
// if you want the message to be displayed never again,
// move setting the cookie outside this click handler
$.cookie('the_cookie', 'never again', { expires: 365, path: '/' }); // expires in 365 days
});
} else {
debug("same date");
}
} else if ((value || "") == "") {
$.cookie('the_cookie', new Date().getTime(), { expires: 365, path: '/' }); // expires in 365 days
debug("date empty, setting to = " + new Date().getTime());
}
function debug(msg) {
$("#debug").append($("<div />").html(msg));
}