cookie message modal

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

Thumbnail
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 Codepen.io
Copyright johngribbin ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

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

</head>
<body>
	<!-- 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">  
  </div>
    
</div>

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

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/johngribbin/cookie-message-modal-RxrxBN */
/* 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 https://www.codeseek.co/johngribbin/cookie-message-modal-RxrxBN */
// 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 === "") {
  cookieModal.style.display = "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) {
    cookieModal.style.display = "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";
  cookieModal.style.display = "none";
};

Comments