JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bottom" id="alert">
this website use cookies
<button onclick="accpetCookie()">
click here for accpet cookie
</button>
</div>
<div class="scroll">
website content
</div>
CSS
.bottom {
position: fixed;
bottom: 0;
width: 100%;
background: #ccc;
color: #fff
}
.scroll {
min-height: 1500px;
}
JavaScript
if (getCookie('accepted') === 'yes') {
document.getElementById("alert").style.display = "none";
}
function accpetCookie() {
setCookie('accepted', 'yes', 100);
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}