jQuery Cookie Popup

A simple jquery to show popup of cookie information

by Venkatesh Dematti

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Cookie Policy Alert Bar with jquery.cookie.js</title>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
  * {
    font-family: sans-serif;
  }
    .cookieAcceptBar {
    display: none;
    position: fixed;
    right: 0;
    text-align: center;
    background-color: rgba(0,0,0,.94);
    color: #fff;
    width: 400px;
    padding: 10px;
    border-radius: 10px;
    z-index: 999999999999;
  }

  .cookieAcceptBar a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }

  #cookieAcceptBarConfirm {
    cursor: pointer;
    position: absolute;
    float: right;
    right: 5px;
    top: 5px;
  }
  div#cookieAcceptBar h4 {
    margin: 0;
    margin-bottom: 10px;
}
div#cookieAcceptBar p {
    font-size: 12px;
    text-align:left;
}
  </style>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="cookieAcceptBar" class="cookieAcceptBar">
	<h4>Cookie Policy <a href="#" id="cookieAcceptBarConfirm"><i class="fa fa-times-circle" aria-hidden="true"></i></a></h4>
  	<p>The Site uses cookies to record users' preferences in relation to the functionality of accessibility.
    Please refer to the help guide of your browser for further information on cookies, including how to disable them. Review our  <a style="color: #60b6ff; text-decoration:underline;" href="https://www.technavio.com/content/privacy-notice">Privacy &amp; Cookie Notice</a></p>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script><script  src="./script.js"></script>
  <script>
  jQuery(document).ready(function(){
    cookiesPolicyBar();
  });

  function cookiesPolicyBar(){
      // Check cookie
      if (jQuery.cookie('yourCookieName') != "active"){
       ...