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);