쿠키 배너

다양한 사이트의 하단에 있는 팝업창을 보셨을 것입니다.
다음과 같이 보입니다.



그런 식으로 배치합시다 =)

HTML

<div class="warning warning--active">
  <div class="warning__text">This website uses cookies.</div>
  <button class="warning__apply" type="button">OK</button>
  <a class="warning__read" href="https://ru.wikipedia.org/wiki/Cookie">Read more</a>
</div>

배너는 텍스트, 확인 버튼 및 설명 문서 링크로 구성됩니다.

기본 CSS

.warning {
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
}

.warning--active {
  display: flex;
}

다이를 왼쪽 하단 모서리에 놓고 너비를 가로질러 늘립니다.

자바스크립트

스크립트에서 다음을 수행해야 합니다.

블록이 있는지 확인하십시오. 그렇지 않으면 작동이 중지됩니다.

블록 찾기 및 확인 버튼;

"청취자"버튼 위로 마우스를 가져갑니다.

버튼을 클릭하면 블록에서 warning--active 클래스를 제거하여 숨깁니다.

사용자가 버튼을 클릭했음을 알리는 쿠키를 저장합니다.

let container;
let apply;

const init = () => {
  if (!who()) {
    // stop the script
    return;
  }
  findElements();
  subscribe();
};

누구

페이지에 블록이 없으면 함수는 false를 반환합니다.

const who = () => document.querySelector(".warning");

요소 찾기()

블록 자체와 내부 버튼을 찾으십시오.

const findElements = () => {
  container = document.querySelector(".warning");
  apply = container.querySelector(".warning__apply");
};

구독하다()

버튼에 "클릭"이벤트 핸들러를 추가합니다.

const subscribe = () => {
  apply.addEventListener("click", onClick);
};

온클릭()

const onClick = (event) => {
  // Override the default behavior
  event.preventDefault();
  // Hide the block
  hideContainer();
  // Set cookies
  setCookie();
};

컨테이너 숨기기()

const hideContainer = () => {
  container.classList.remove("warning--active");
};

기본 CSS 섹션에서 warning 클래스에 display: none; 속성이 있고 warning--active 클래스에 display: flex; 속성이 있음을 알 수 있습니다.
warning--active를 제거하여 블록을 숨깁니다.

setCookie()

const setCookie = () => {
  document.cookie = "warning=true; max-age=2592000; path=/";
};

사용자가 쿠키 사용에 동의했음을 알려주는 쿠키를 설정해 봅시다.

2592000 - number of seconds in a month

쿠키가 설정되면 차단이 더 이상 페이지에 나타나지 않는 것으로 간주됩니다.

이는 두 가지 방법으로 달성할 수 있습니다.

등을 통해

사용자가 설정한 쿠키를 가지고 있는 경우 차단을 표시하지 않도록 백엔드 또는 자신(백엔드인 경우)에 요청하십시오.

The author of this article prefers the backend method =)

정면을 통해

블록을 확인하는 대신 쿠키를 찾는 who() 함수를 다시 작성해 보겠습니다.

const who = () => {
  // If there are cookies, it will return true  
  return getCookie('warning');
};

The implementation of the getCookie function can be seen at learn.javascript.ru

HTML에서 warning--active 클래스를 제거하십시오.

<div class="warning warning--active">

기본적으로 블록은 숨겨집니다. 스크립트가 쿠키를 찾지 못한 경우 표시해 보겠습니다.

const showContainer = () => {
  container.classList.add("warning--active");
};

const init = () => {
  if (!who()) {
    return;
  }
  findElements();
  showContainer();
  subscribe();
};

다른 모든 것은 변경되지 않습니다.

전체 스크립트:

let container;
let apply;

const who = () => document.querySelector(".warning");

const findElements = () => {
  container = document.querySelector(".warning");
  apply = container.querySelector(".warning__apply");
};

const hideContainer = () => {
  container.classList.remove("warning--active");
};

const setCookie = () => {
  document.cookie = "warning=true; max-age=2592000; path=/";
};

const onClick = (event) => {
  event.preventDefault();
  hideContainer();
  setCookie();
};

const subscribe = () => {
  apply.addEventListener("click", onClick);
};

const init = () => {
  if (!who()) {
    return;
  }
  findElements();
  subscribe();
};

init();

오온codepen

The full script can be reduced to 8 lines

if (document.querySelector(".warning")) {
  const container = document.querySelector(".warning");
  const apply = container.querySelector(".warning__apply");
  apply.addEventListener("click", () => {
    container.classList.remove("warning--active");
    document.cookie = "warning=true; max-age=2592000; path=/";
  });
};