Simple cookie bar - close button

Question

I'm trying to make simple cookie bar.

Here's my code.

#cookie-bar-bottom {
 bottom: 0;
}
.cookie-bar {
 width: 100%;
 line-height: 30px;
 left: 0;
 position: fixed;
 z-index: 100;
 background-color: rgba(0,0,0,0.70);
}
.cookie-content {
 color: white;
 text-align: center;
 padding-top: 10px;
}
.cookie-hide {
 margin-left: 80px;
 text-decoration: none;
 background-color: black;
 color: white;
 border: 1px solid white;
 outline: none;
}
.cookie-hide:hover {
 background-color: #155670;
}

<div id="cookie-bar-bottom" class="cookie-bar">
   <div class="cookie-content">
     <p>
         We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" onclick="this.parentNode.parentNode.style.display = 'none'" value="I understand" type="button">
        </p>
    </div>
  </div>

It closes when I hit 'I understand' button. The problem is with that close button because when I refresh my website cookie bar appears again. I wouldn't like to see it when I'm refreshing my website.

I don't want to use any PHP function btw. it should be - I think, java/jQuery script/function, and should work with my structure of cookie bar code.

Answer 1

The problem is with that close button because when I refresh my website cookie bar appears again. I wouldn't like to see it when I'm refreshing my website.

This happens because you do not create the corresponding cookie and test on document ready if the cookie already exist.

From How do I create and read a value from cookie? you can write something like:

document.addEventListener('DOMContentLoaded', function(e) {
       if (getCookie('ItsAllOk').length > 0) {
         document.getElementById('cookie-bar-bottom').style.display = 'none';
       }
        document.getElementById('cookie-hide').addEventListener('click', function(e) {
            createCookie('ItsAllOk', true, 1);
        })
});

The snippet:

document.addEventListener('DOMContentLoaded', function(e) {
  if (getCookie('ItsAllOk').length > 0) {
    document.getElementById('cookie-bar-bottom').style.display = 'none';
  }
  document.getElementById('cookie-hide').addEventListener('click', function(e) {
    createCookie('ItsAllOk', true, 1);
  })
});



var createCookie = function(name, value, days) {
  var expires;
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }
  else {
    expires = "";
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return "";
}

#cookie-bar-bottom {
  bottom: 0;
}
.cookie-bar {
  width: 100%;
  line-height: 30px;
  left: 0;
  position: fixed;
  z-index: 100;
  background-color: rgba(0,0,0,0.70);
}
.cookie-content {
  color: white;
  text-align: center;
  padding-top: 10px;
}
.cookie-hide {
  margin-left: 80px;
  text-decoration: none;
  background-color: black;
  color: white;
  border: 1px solid white;
  outline: none;
}
.cookie-hide:hover {
  background-color: #155670;
}

<div id="cookie-bar-bottom" class="cookie-bar">
    <div class="cookie-content">
        <p>
            We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" onclick="this.parentNode.parentNode.style.display = 'none'" value="I understand" type="button">
        </p>
    </div>
</div>

Answer 2

You can use localStorage to store an item when someone accepts, and only show the cookie bar if that item doesn't exist.

if (!localStorage.getItem('cookie')) {
  $('#cookie-bar-bottom').show();
}

$('#cookie-hide').on('click',function() {
  localStorage.setItem('cookie',true);
  $('#cookie-bar-bottom').hide();
})

#cookie-bar-bottom {
 bottom: 0;
  display: none;
}
.cookie-bar {
 width: 100%;
 line-height: 30px;
 left: 0;
 position: fixed;
 z-index: 100;
 background-color: rgba(0,0,0,0.70);
}
.cookie-content {
 color: white;
 text-align: center;
 padding-top: 10px;
}
.cookie-hide {
 margin-left: 80px;
 text-decoration: none;
 background-color: black;
 color: white;
 border: 1px solid white;
 outline: none;
}
.cookie-hide:hover {
 background-color: #155670;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cookie-bar-bottom" class="cookie-bar">
   <div class="cookie-content">
     <p>
         We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" value="I understand" type="button">
        </p>
    </div>
  </div>

Answer 3

What you want to achieve is simple. But some more JavaScript is needed.

The code easy implement (just copy/paste) is there: https://cookienotice.js.org

Edit: full solution

Styles: Add the following code to your HTML <head></head> section.

<style>
#cookie-notice {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    max-width: 450px;
    margin: auto;
    padding: 0.5rem;
    border: 1px solid #eee;
    background-color: #fefefe;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 22px;
    font-size: 15px;
    text-align: center;
    color: #555;
}
.cookie-notice-more {
    margin: 0 0.25rem;
    text-decoration-style: dashed;
    color: inherit;
}
.cookie-notice-close {
    padding: 0 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0.125rem;
    line-height: 20px;
    text-decoration: none;
    color: #888;
}
@media only screen and (min-width: 768px) {
    #cookie-notice {
        bottom: 1rem;
        border-radius: 0.25rem;
    }
    .cookie-notice-close {
        float: right;
    }
}
</style>

Notice block: Add the following code to your HTML <body></body> section.

<div id="cookie-notice">
    We use cookies to deliver better experience.
    <a href="https://cookienotice.js.org/about-cookies" class="cookie-notice-more" target="_blank" rel="noopener">More info...</a>
    <a href="javascript:void(0)" class="cookie-notice-close" onclick="closeCookieNotice()">OK</a>
</div>

Script: Add the following code to your HTML footer before the </body> closing tag.

<script>
function closeCookieNotice() {
    const nowDate = new Date();
    const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString();
    document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";";
    document.getElementById("cookie-notice").style.display = "none";
};
document.addEventListener("DOMContentLoaded", function() {
    const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0];
    if (cookie_notice !== "0") {
        document.getElementById("cookie-notice").style.display = "block";
    }
});
</script>

I've participated in developing some themes for cookie notice.

You can give it another look using themes.