set a cookie on click and then check if the cookie is set and dont show that message again
this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day.
The cookie in this example is set to expire in a day, so then if you come back to this 24 hours later the message should show again.
You can change the length of time the message goes away for by just changing the days number in the cookie script.
The message can sometimes appear until the document is ready and then it is removed when the cookie is checked.
This relies on the script js.cookie to set and retrieve the cookies, i dont think you actually need jquery for this to work as its a standalone library. I do however use jquery to hide the element, so you could probably change this to use raw js if you dont use jquery.
Update: changed this to use no jquery.
Update 2: added button to delete the cookie, if you want to see the message again on reload.
set a cookie on click and then check if the cookie is set and dont show that message again Demo
View Demo Full Screen View Demo New Tab
set a cookie on click and then check if the cookie is set and dont show that message again Code
HTML
<div class='message' id='message'>
<p>This is a message</p>
<button onclick="cookie_set();">Close</button>
</div>
<button onclick="cookie_delete();">Delete Cookie</button>CSS
.message {
text-align:center;
padding:30px;
border-radius:5px;
border:3px solid rgba(255,255,255,0.3);
margin:0 auto;
width:200px;
margin-bottom:10px;
}Scripts
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>Javascript
function cookie_check() {
var cookie_val = Cookies.get('message');
if(cookie_val == 'true') {
document.getElementById("message").style.display = "none";
}
}
function cookie_set() {
Cookies.set('message', 'true', { expires: 1 });
document.getElementById("message").style.display = "none";
}
document.addEventListener("DOMContentLoaded", function(event) {
cookie_check();
});
function cookie_delete() {
Cookies.remove('message');
document.getElementById("message").style.display = "block";
}