cookie policy popup

by Peter Aad

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed...

CSS

.navbar {margin-bottom: 20px;}
#cookie-policy-html {display:none;}
nav.navbar #cookie-popup {width:100%;position:absolute;top:100%;left:0;background-color:#ccc;z-index:4;border: 1px solid #000;outline: 2px solid #fff}
nav.navbar #cookie-popup .inner {width:100%;height:100%;position:relative;padding:20px;}
nav.navbar #cookie-popup .inner .btn-close {position:absolute;bottom:0;right:0;background-color:#000;color:#fff;text-transform:uppercase;text-align:center;border: 0 none; padding: 1px 16px;}

JavaScript

var isProduction = true;
var isEMEA = true;
// sets the cookie and the expiry time limit in days
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();    
    document.cookie = cname+"="+cvalue+"; "+expires;
}

// returns the cookie, if it exists...
function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

// checks if its there, if not will drop the cookie
function checkCookie() {
    // so the markup will have the popup, but will have the hide-me class
    var cookiePolicy=getCookie("cookie_policy");
    if (cookiePolicy == "" || cookiePolicy == null) {
        var copy = $("#cookie-policy-html").html();
        $("nav.navbar").append("<div id='cookie-popup'><div class='inner'>"+copy+"</div></div>");
    }
}

$(function(){
    
    // close popup
    $( "nav.navbar" ).on( "click", "#cookie-popup .btn-close", function() {
      $("#cookie-popup").addClass("hide");    
      setCookie("cookie_policy", "1", 390);
      // ga tracking on close btn
      //ga('send', 'event', 'button', 'click', 'cookie-popup-close');
    });
    $( "nav.navbar" ).on( "click", "#policy-link", function() {
      // ga tracking on newsletter sign up link btn
      //ga('send', 'event', 'link', 'click', 'cookie-policy-link');
    }); 
    // check if site is EMEA (TODO) and Production is true before looking for the cookie
    if (isEMEA && isProduction) checkCookie();
});