Help coding a cookie Policy banner html and js


#1

I want to make a fixed position cookie policy banner like the one that appears in the bottom of almost all website.
right now am doing great with the HTML and CSS

<div id="cookieConsent">
    <div id="closeCookieConsent">x</div>
    This website is using Cookies to improve your user experience. <a href="#" target="_blank">More info</a>. <a class="cookieConsentOK">That's Fine</a>
</div>

/*Cookie Consent Begin*/
#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: #ccc;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 9999;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    float: right;
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #F1D600;
    color: #000;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    margin: 0 60px 0 10px;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #E0C91F;
}
/*Cookie Consent End*/

the only problem am having is with js I want to put a cookie in the user pc when he closes the cookie banner and then I want to check if the cookie is created if yes don’t show the cookie banner if not that means this is the first time this user visit the website to show the banner .

that’s what i want to do but my js skills are humble so please can someone help.


#2

Use JS to set the cookies.

  1. Modal is hidden by default
  2. Check if the cookie is set
    2.1. If set, do nothing
    2.2.1 If not set, use jQuery fadeIn function to show the modal
    2.2.2 On close of the modal, use jQuery fadeOut to close it, and set a cookie.

#3

For your reference, here are the cookie functions

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}