Build a Cookie Consent Popup Using JavaScript and a Bootstrap Modal

Cookie consent plugins are plentiful, a quick google search and you’ll find some JavaScript to pull in via a CDN, a node package to install or a random third party plugin for the platform you’re working within. However I sometimes get rather frustrated when I use an off the shelf solution and attempt to bend it to fit my requirements; for example overriding the awful overly specific CSS that commonly ships with it, or when I want to bundle it with my project build rather than link via a CDN.

Recently I needed a cookie consent pop up in the style of a modal, so I thought rather than scouring the web for an hour for something that almost does what I need it to do, then have to hack away for another hour customising it, I wondered how hard would it be to roll my own; turns out that there really isn’t an awful lot to it!

The whole thing has to, quite ironically, depend on a cookie being set to remember the user’s consent, so to start with we need to implement methods to handle the getting and setting of cookies via JavaScript. This has unsurprisingly been done time and time again and posted all over the web, there’s no need to reinvent the wheel here, for these two methods I’ve simply used the examples documented on w3schools.com

As for the rest of the code, we would need to:

Define a unique cookie namespace
Define a time period until the cookie expires
Hook up the click event on the “Accept” button to set the cookie
Implement a method to check for the existence of a cookie, to then qualify if the cookie popup modal should be fired when the user revisits the site or a new page is loaded

Cookie consent modal JavaScript

The majority of the Javascript is written in ES5, however since we are using the Bootstrap modal plugin, which has a jQuery dependancy, I am handling the event listeners with jQuery also.


(function () {
  "use strict";

  var cookieName = 'tplCookieConsent'; // The cookie name
  var cookieLifetime = 365; // Cookie expiry in days

  /**
   * Set a cookie
   * @param cname - cookie name
   * @param cvalue - cookie value
   * @param exdays - expiry in days
   */
  var _setCookie = function (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 + ";path=/";
  };

  /**
   * Get a cookie
   * @param cname - cookie name
   * @returns string
   */
  var _getCookie = function (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 "";
  };

  /**
   * Should the cookie popup be shown?
   */
  var _shouldShowPopup = function () {
    if (_getCookie(cookieName)) {
      return false;
    } else {
      return true;
    }
  };

  // Show the cookie popup on load if not previously accepted
  if (_shouldShowPopup()) {
    $('#cookieModal').modal('show');
  }

  // Modal dismiss btn - consent
  $('#cookieModalConsent').on('click', function () {
    _setCookie(cookieName, 1, cookieLifetime);
  });

})();

(function () {

"use strict";

var cookieName = 'tplCookieConsent'; // The cookie name

var cookieLifetime = 365; // Cookie expiry in days

/**

* Set a cookie

* @param cname - cookie name

* @param cvalue - cookie value

* @param exdays - expiry in days

var _setCookie = function (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 + ";path=/";

};

/**

* Get a cookie

* @param cname - cookie name

* @returns string

var _getCookie = function (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 "";

};

/**

* Should the cookie popup be shown?

var _shouldShowPopup = function () {

if (_getCookie(cookieName)) {

return false;

} else {

return true;

}

};

// Show the cookie popup on load if not previously accepted

if (_shouldShowPopup()) {

$('#cookieModal').modal('show');

}

// Modal dismiss btn - consent

$('#cookieModalConsent').on('click', function () {

_setCookie(cookieName, 1, cookieLifetime);

});

})();

Modal popup HTML

The popup itself can be dismissed without clicking accept, however it will persist as the user browses other pages on the site until the user accepts. It should be noted that the following example is merely indicative to demonstrate functionality for the purpose of this tutorial, and is not necessarily GDPR compliant.


<div class="modal fade cookieModal" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="cookieModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="cookieModalLabel">Cookie Information and Consent Request</h2>
            </div>
            <div class="modal-body">
                <h4>Cookie Policy</h4>
                <p>[COOKIE MESSAGE HERE]</p>
                <p>
                    <a href="/privacy-statement" target="_blank">Click here to view our cookie policy</a>
                </p>
            </div>
            <div class="modal-footer">
                <button id="cookieModalConsent" type="button" class="btn btn-primary btn-lg btn-block" data-dismiss="modal">Accept</button>
            </div>
        </div>
    </div>
</div>

<h2 id="cookieModalLabel">Cookie Information and Consent Request</h2>

</div>

<h4>Cookie Policy</h4>

<p>[COOKIE MESSAGE HERE]</p>

<p>

<a href="/privacy-statement" target="_blank">Click here to view our cookie policy</a>

</p>

</div>

<button id="cookieModalConsent" type="button" class="btn btn-primary btn-lg btn-block" data-dismiss="modal">Accept</button>

</div>

And there you go, a nice and clean un-bloated solution which can be extended to fit your needs.

Tutorial

Cookie consent modal JavaScript

Modal popup HTML

Share this tutorial: