Всплывающее согласие на использование файлов cookie

В сегодняшнем руководстве мы узнаем, как создать баннер согласия на использование файлов cookie. Для создания этого руководства нам понадобятся HTML, CSS и ванильный Javascript.

Всплывающий баннер cookie появляется на экране при загрузке страницы. Баннер cookie появляется при каждой загрузке страницы, пока пользователь не нажмет на кнопку ‘Принять’. Пользователь больше не сможет видеть баннер cookie-файлов при загрузке страницы, как только cookie-файл будет принят.

СКАЧАТЬ

Теперь, прежде чем мы начнем кодировать, давайте создадим структуру папок проекта. Мы начнем с создания папки проекта под названием "Баннер согласия на использование файлов cookie’. Внутри этой папки у нас есть четыре файла. Этими файлами являются index.html, style.css, script.js и cookie.png. Они представляют собой HTML-документ, таблицу стилей, файл сценария и изображение файла cookie соответственно.

Мы начинаем с HTML-кода. Сначала скопируйте приведенный ниже код и вставьте его в свой HTML-файл.

Далее нам нужно оформить этот баннер с использованием файлов cookie. Для этой цели мы используем CSS. Теперь скопируйте приведенный ниже код и вставьте его в свою таблицу стилей.

И наконец, нам нужно добавить функциональность к этому баннеру согласия на использование файлов cookie. Для этого мы используем javascript. Теперь скопируйте код, предоставленный вам ниже, и вставьте его в ваш файл javascript.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cookie Consent Banner</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="cookiePopup" class="hide">
      <img src="cookie.png" />
      <p>
        Our website uses cookies to provide your browsing experience and
        relevant information. Before continuing to use our website, you agree &
        accept  our >
      </p>
      <button id="acceptCookie">Accept</button>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS КОД:


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #f5f8ff;
}
#cookiePopup {
  background-color: #ffffff;
  position: absolute;
  font-size: 14px;
  width: 70vw;
  max-width: 42.85em;
  box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
  font-family: "Poppins", sans-serif;
  text-align: justify;
  line-height: 1.8em;
  padding: 2em 1.4em;
  border-radius: 6px;
  transition: all 0.5s ease-in;
}
#cookiePopup img {
  display: block;
  width: 3.75em;
  transform: translateZ(0);
  position: relative;
  margin: auto;
}
#cookiePopup p {
  text-align: center;
  margin: 1.4em 0;
}
#cookiePopup button {
  background-color: #6859fe;
  border: none;
  color: #ffffff;
  font-size: 1.2em;
  padding: 1em 1.4em;
  display: block;
  position: relative;
  margin: auto;
  border-radius: 5px;
}
#cookiePopup a {
  color: #6859fe;
}
.hide {
  visibility: hidden;
  bottom: 0;
  right: 2em;
}
.show {
  visibility: visible;
  bottom: 2em;
  right: 2em;
}
@media only screen and (max-width: 37.5em) {
  #cookiePopup {
    width: 100%;
  }
  .hide {
    bottom: 2em;
    right: 0;
  }
  .show {
    right: 0;
    bottom: 0;
  }
}

JAVASCRIPT КОД:


let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
  //Create date object
  let d = new Date();
  //Increment the current time by 1 minute (cookie will expire after 1 minute)
  d.setMinutes(2 + d.getMinutes());
  //Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
  document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
  //Hide the popup
  popUp.classList.add("hide");
  popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
  //Read the cookie and split on "="
  let input = document.cookie.split("=");
  //Check for our cookie
  if (input[0] == "myCookieName") {
    //Hide the popup
    popUp.classList.add("hide");
    popUp.classList.remove("show");
  } else {
    //Show the popup
    popUp.classList;
    popUp.classList.remove("hide");
  }
};
//Check if cookie exists when page loads
window.onload = () => {
  setTimeout(() => {
    checkCookie();
  }, 2000);
};

Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.