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>

Categorized in:

HTML/CSS,

Last Update: May 18, 2024