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>