Build a Cookie Consent Popup Using JavaScript and a Bootstrap Modal

Published:
November 18, 2018

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.

Cookie consent js - full

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

(function(){

"use strict";

varcookieName='tplCookieConsent';// The cookie name

varcookieLifetime=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){

vard=newDate();

d.setTime(d.getTime()+(exdays*24*60*60*1000));

varexpires="expires="+d.toUTCString();

document.cookie=cname+"="+cvalue+";"+expires+";path=/";

};

/**

* Get a cookie

* @param cname - cookie name

* @returns string

*/

var_getCookie=function(cname){

varname=cname+"=";

varca=document.cookie.split(';');

for(vari=0;i<ca.length;i++){

varc=ca[i];

while(c.charAt(0)==' '){

c=c.substring(1);

}

if(c.indexOf(name)==0){

returnc.substring(name.length,c.length);

}

}

return"";

};

/**

* Should the cookie popup be shown?

*/

var_shouldShowPopup=function(){

if(_getCookie(cookieName)){

returnfalse;

}else{

returntrue;

}

};

// 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.