0

I'm trying to make a cookie/local storage modal with 2 buttons in my landing page. One button will say "Ok Got it" and the modal goes away and the other button is a "Go There" which will link to another page. Currently, I have working code for "Ok Got it" but the "Go There" button just links to the other page and does not activate the cookie/local storage in the landing page.

HTML:

<div class="cookie-container">
  <h2 class="text-white" style="color:white">What's New With Us?</h2>
   <a href="/export.html"><img class="img-fluid" width="100%" src="/images/landing/Fan-Flyer-Nov.png" alt="Fan Flyer"></a> 
  <div class="row mx-auto mt-3">
    <p class="mx-auto"><a class="btn btn-small cookie-btn" href="">Got it!</a></p>
    <p class="mx-auto"><a class="btn btn-small cookie-btn" href="export.html">Go There</a></p>
  </div>
</div>

CSS

.cookie-container {
  height: 30rem;
  width: 40rem;
  margin:auto;
  position: fixed;
  vertical-align: middle;
  z-index:5;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #2f3640;
  color: #f5f6fa;
  padding: 0 32px;
  box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);

  transition: 400ms;
}

.cookie-container.active {
  bottom: 15%;
}

.cookie-container a {
  color: #f5f6fa;
}

.cookie-btn {
  background: #e84118;
  border: 0;
  margin:auto;
  color: #f5f6fa;
  padding: 12px 48px;
  font-size: 18px;
  text-align:center;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor: pointer;
}

Javascript:

const cookieContainer = document.querySelector(".cookie-container");
const cookieButton = document.querySelector(".cookie-btn");

cookieButton.addEventListener("click", () => {
  cookieContainer.classList.remove("active");
  localStorage.setItem("cookieBannerDisplayed", "true");
});

setTimeout(() => {
  if (!localStorage.getItem("cookieBannerDisplayed")) {
    cookieContainer.classList.add("active");
  }
}, 2000);
max fan
  • 5
  • 1

0 Answers0