Cookies Popup

Website cookies popup - One time

by Manikandan Kalaivanan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blue-box-cookies" id="cookie-popup" style="display: none;">
  <div class="container">
    <div class="row">
      <div class="col-md-10 text-left">Our Website uses cookies to track performancesm statistics, advertising purposes and to ensure you get the best personalized experiance. <a href="https://tatacoffee.com/privacy-policy" target="_blank">Click for more information</a></div>

      <div class="col-md-2 text-right"><button class="btn-custom-cookies" id="cookie-popup-close">GOT IT</button></div>
    </div>
  </div>
</div>

CSS

.blue-box-cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #007aec;
  color: #fff;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 500;
}

.blue-box-cookies .btn-custom-cookies {
  border-radius: 0;
  background: #fff;
  color: #007aec;
  width: 100px;
  border: none;
  padding: 7px 5px;
  font-weight: 700;
  font-size: 13px;
}

.blue-box-cookies .col-md-10 {
  padding-left: 0;
  padding-top: 7px;
}

.blue-box-cookies a {
  color: #fff;
  text-decoration: underline;
}

.blue-box-cookies a:hover {
  color: #fff;
}

@media only screen and (max-width: 2500px) {
  .blue-box-cookies .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
  }
}

@media only screen and (max-width: 1600px) {
  .blue-box-cookies .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
}

.blue-box-cookies .container {
  width: inherit;
}

JavaScript

var cook = jQuery.noConflict();
localStorage.setItem('popState', '');
cook(document).ready(function() {
  if (localStorage.getItem('popState') != 'shown') {
    cook("#cookie-popup").show();
  }

  cook('#cookie-popup-close').click(function(e) {
    localStorage.setItem('popState', 'shown');
    cook('#cookie-popup').fadeOut();
  });
});