In this article I will try to help to implement in an easy way a cookie notice bar for your site.

Is assumed you have jQuery loaded in your site.

first we create a container with the information, just change the anchor link to point privacy information page in your site.

<div class="cookienotice-container" id="cookienotice-container" style="display:none;">
			
			<div class="cookienotice-content">
			
				<div class="cookienotice-message">
					This site uses cookies. By continuing to browse this site you are agreeing to our use of cookies.
					<a href="/privacy-policy" class="cookienotice-page-link" title="Find out more here.">Find out more here.</a>
				</div>
				<!-- Close Button -->
				<div class="cookienotice-button-container">
					<a class="cookienotice-button" id="cookienotice-close-button" title="Close"><strong>x</strong></a>
				</div>
			</div>
</div>

Now add this javascript part or place in end of page before </body> tag :

<script type="text/javascript"> 
        var days = 90; // Days for our cookie 'notification shown' expiration
        
			if (!getCookie('ow_cookie_notice')) {
				$('#cookienotice-container').show('slow');
				createCookie('ow_cookie_notice', 'shown', days);
			}

			$('#cookienotice-close-button').on('click', function() {
				$('#cookienotice-container').hide();
			});


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

			function getCookie(c_name) {
				var c_value = document.cookie;
				var c_start = c_value.indexOf(" " + c_name + "=");
				if (c_start == -1) {
					c_start = c_value.indexOf(c_name + "=");
				}
				if (c_start == -1) {
					c_value = null;
				} else {
					c_start = c_value.indexOf("=", c_start) + 1;
					var c_end = c_value.indexOf(";", c_start);
					if (c_end == -1) {
						c_end = c_value.length;
					}
					c_value = unescape(c_value.substring(c_start, c_end));
				}
				return c_value;
			}
</script>

Only give some css style to the container

.cookienotice-container {text-align:left;opacity:0.8; font-size:10px;position:fixed;bottom:0;left:0;padding: 5px 15px;width:100%;height:20px;background-color:#0a0a0a;color:#ffffff;margin:0 auto;}
.cookienotice-button-container {float: right;height: 10px; margin: 0;padding: 0;position: relative;top: -15px;width: 30px;}
.cookienotice-container a {color:#ffffff;} 

Now your are ready, when an user visits firts time your site, the notifier will be shown.


cookie law notifier

 

If he doesn´t clear his cookies, the notifier will be hidden for 90 days, or whatever you assigned to var days into js part.

In addition clicking the close button hiddes the notifier.