How to Create a Simple and Responsive Cookie Consent Popup |...

512

How to Create a Simple and Responsive Cookie Consent Popup

2025-05-12 06:05:59 • HTML

Here’s a simple and responsive Cookie Consent Popup built with HTML, CSS, and JavaScript. It will show a cookie banner at the bottom of the page, and once the user clicks "Accept," it sets a cookie to remember the choice and hides the banner.

Features:

Responsive bottom banner
Remembers user consent using document.cookie
Simple, modern design

Folder Structure

/cookie-banner/
│
├── index.html
├── style.css
└── script.js

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cookie Consent</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Cookie Consent Banner -->
  <div class="cookie-banner" id="cookieBanner">
    <p>This website uses cookies to ensure you get the best experience on our website. 
      <a href="#">Learn more</a>
    </p>
    <button id="acceptCookies">Accept</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

`style.css`

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2c2c2c;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  flex-wrap: wrap;
}

.cookie-banner p {
  margin: 0;
  flex: 1 1 70%;
}

.cookie-banner a {
  color: #00bfff;
  text-decoration: underline;
}

.cookie-banner button {
  background: #00bfff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

.cookie-banner button:hover {
  background: #009acd;
}

`script.js`

document.addEventListener("DOMContentLoaded", function () {
  const cookieBanner = document.getElementById("cookieBanner");
  const acceptBtn = document.getElementById("acceptCookies");

  // Check if cookie already accepted
  if (!document.cookie.includes("cookiesAccepted=true")) {
    cookieBanner.style.display = "flex";
  }

  acceptBtn.addEventListener("click", function () {
    // Set cookie for 1 year
    document.cookie = "cookiesAccepted=true; max-age=" + 60 * 60 * 24 * 365 + "; path=/";
    cookieBanner.style.display = "none";
  });
});

Connectez-vous pour aimer, partager et commenter!

How to Create a Simple and Responsive Cookie Consent Popup

Features:

Folder Structure

`index.html`

`style.css`

`script.js`

Lire la suite

Golden Goose It interesting to try and take an objective

how set navigation bar text color in android studio project

Introduction to jQuery

The Best Social Media Marketing Strategies for Small Businesses

How Grocery Stores Look in LA, San Antonio, and Austin

Nous rejoindre

Langues

How to Create a Simple and Responsive Cookie Consent Popup

Features:

Folder Structure

index.html

style.css

script.js

Lire la suite

Golden Goose It interesting to try and take an objective

how set navigation bar text color in android studio project

Introduction to jQuery

The Best Social Media Marketing Strategies for Small Businesses

How Grocery Stores Look in LA, San Antonio, and Austin

`index.html`

`style.css`

`script.js`