cookie message modal

In this example below you will see how to do a cookie message modal with some HTML / CSS and Javascript

This awesome code was written by johngribbin, you can see more from this user in the personal repository.
You can find the original code on
Copyright johngribbin ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>cookie message modal</title>
      <link rel="stylesheet" href="css/style.css">



	<title>Cookie Policy Notification</title>
	<link rel="stylesheet" type="text/css" href="main.css">

	<!-- cookie message modal -->
 	<div id="myModal" class="cookie-message__modal">

	<!-- cookie message modal content -->
  <div class="cookie-message__modal-content">
    <p>We use cookies to ensure that we give you the best experience on our website. Please confirm you are ok with the use of cookies by clicking 'OK'</p>
    <label for='okButton' class='cookie-message__label' id=okLabel>OK</label>
    <button id='okButton' class="cookie-message__button">  

	<script type="text/javascript" src="main.js"></script>

    <script  src="js/index.js"></script>



/*Downloaded from */
/* the background when modal content appears */
.cookie-message__modal {
  background-color: rgba(0, 0, 0, 0.4);
  display: none; 
  height: 100%;
  left: 0;
  position: fixed; 
  top: 0;
  width: 100%; 
  overflow: auto; 
  z-index: 1; 

/* the modal content box */
.cookie-message__modal-content {
  align-items: center;
  background-color: HSL(343, 100%, 70%);
  border: 1px solid;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.75);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 1em;

/* ok button label */
.cookie-message__label {
  border: 1px solid white;
  border-radius: 10px;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.75);
  padding: 0.5em;
  text-align: center;

.cookie-message__label:hover {
  background-color: HSL(343, 100%, 60%);
  cursor: pointer;

.cookie-message__label:active {
  background-color: HSL(343, 100%, 80%);
  box-shadow: none;

/* hidden button element */
.cookie-message__button {
  display: none;

/*Downloaded from */
// Get the modal
var cookieModal = document.getElementById("myModal");

// Get the button element that closes the modal
var okButton = document.getElementById("okButton");

//if no cookies found, show the cookie policy messsage modal
if (document.cookie === "") { = "block";

//if there is cookies found
if (document.cookie !== "") {
  //create empty object to hold all name/value cookies
  var cookieObj = {};

  //get the cookies - as a string
  var cookieStr = document.cookie;

  //split cookies string at ';' to create array of the name/value pairs
  var cookieArr = cookieStr.split(";");

  //loop throaugh array items, and split them at '=', and add each name/value pair to the object entitled - cookieObj
  for (var i = 0; i < cookieArr.length; i++) {
    var split = cookieArr[i].split("=");
    cookieObj[split[0].trim()] = split[1].trim();

  //if the cookies object doesnt contain a cookie named "agree-to-cookies", show the modal
  if (cookieObj.hasOwnProperty("agree-to-cookies") !== true) { = "block";

//When the user clicks OK button label, create a persistent cookie named "agree-to-cookies" that expires in 24 hours and close the modal
okButton.onclick = function() {
  document.cookie = "agree-to-cookies=yes;max-age=86400"; = "none";