Simple cookie bar using HTML and javaScript
CSS:
#cookie-bar.fixed {
position: fixed;
bottom: 5;
left: 0;
z-index: 100;
}
#cookie-bar {
line-height: 24px;
color: #eeeeee;
text-align: center;
padding: 3px 0;
width: 100%;
color: white;
background-color: #444;
display:none;
}
.cb-enable {
border-radius: 10%;
margin-left: 100px;
color: white;
padding: 5px;
border-radius: 10%;
font-family: serif;
text-decoration: none;
transition: .3s background-color;
}
.cb-enable:hover {
background-color: darkcyan;
JS:
window.onload = function(){
try {
if(localStorage.getItem("cookie-enable")!="1"){
document.getElementById("cookie-bar").style.display="block";
}
document.getElementById("save-cookie-example").addEventListener( "click", function() {
localStorage.setItem("cookie-enable", "1");
document.getElementById("cookie-bar").style.display="none";
} );
} catch( e ) {
return false;
}
}
HTML:
<div id="cookie-bar" class="fixed">
<p>We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="/privacy-policy/#cookies" class="cb-policy">Cookies Policy</a>
<a href="#" id="save-cookie-example"class="cb-enable">I Understand</a>
</p>
</div>