(() => {
const getCookie = (name) => {
const value = " " + document.cookie;
console.log("value", `==${value}==`);
const parts = value.split(" " + name + "=");
return parts.length < 2 ? undefined : parts.pop().split(";").shift();
};
const setCookie = function (name, value, expiryDays, domain, path, secure) {
const exdate = new Date();
exdate.setHours(
exdate.getHours() +
(typeof expiryDays !== "number" ? 365 : expiryDays) * 30
);
document.cookie =
name +
"=" +
value +
";expires=" +
exdate.toUTCString() +
";path=" +
(path || "/") +
(domain ? ";domain=" + domain : "") +
(secure ? ";secure" : "");
};
const $cookiesBanner = document.querySelector(".newsletter-banner");
const $cookiesBannerButton = $cookiesBanner.querySelector("#bannerClose");
const cookieName = "cookiesBanner";
const hasCookie = getCookie(cookieName);
if (!hasCookie) {
$cookiesBanner.classList.remove("banner-hide");
}
$cookiesBannerButton.addEventListener("click", () => {
setCookie(cookieName, "closed");
$cookiesBanner.remove();
});
})();body {
margin: 0;
padding: 10%;
}
.newsletter-banner {
background: url("banner_pop_up.png") no-repeat center;
background-size: cover;
color: #fff;
padding-bottom: 5%;
font-size: 13px;
text-align: center;
position: fixed;
bottom: 0;
margin: 0 0 3% 0;
width: auto;
z-index: 10000;
opacity:0;
animation:show 3s 3s forwards;
transition: .5s;
}
/* Banner Close button*/
.banner_close {
color: #e30616;
cursor: pointer;
}
.banner_close:hover {
color: #4A4A49;
}
.banner_buttonbox
{
padding: 2% 5% 8% 0;
width: 35px;
float: right;
}
#bannerHide{
visibility: hidden;
}
/* End of Banner Close button*/
.banner_cta
{
padding: 0 5% 5% 5%;
}
@keyframes show {
to {opacity:1}
}
.banner-hide {
display: none;
}
/* Medium devices (tablets, 579px and up) for the pop banner*/
@media (min-width: 579px) {
.banner_close {
color: #e30616;
cursor: pointer;
}
.banner_buttonbox
{
padding: 2% 7% 8% 0;
}
.banner_cta
{
padding: 0 4% 4% 4%;
}
.newsletter-banner {
padding: 10%;
font-size: 18px;
text-align: center;
position: fixed;
bottom: 0;
padding: 0;
margin: 0 20% 3% 20%;
width: auto;
}
}<!DOCTYPE html>
<html>
<head>
<title>This is the title of the webpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="cookiebanner.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</head>
<body>
<br><br><br><br>
<div>
<br> <br>
<p>Test site</p>
<p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p>
<p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p>
<p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p><p>Test site</p>
</div>
<div class="newsletter-banner banner-hide shadow-lg">
<div id="bannerHide" class="containter">
<div class="row">
<div class="col-10">
<!---Empty div to space out trigger-->
</div>
<div class="col-2">
<div class="banner_buttonbox">
<!--(the close button) This is a google font, find the CDN in header includes-->
<i id="bannerClose" class="material-icons banner_close" style="font-size:35px;">highlight_off</i>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<!--Start of banner CTA-->
<div class="banner_cta">
<h2>Be the first to know when we post new articles</h2>
<p><em>Susbscribe to our knowlegde Base and industry insights</em></p>
<button id="" style="background-color: red;color: #fff;">Susbscribe</button>
</div>
<!---End of Banner CTA--->
</div>
</div>
</div>
</div>
<script src="cookie.js"></script>
<script>
const banner = document.getElementById('bannerHide');
setTimeout(() => {
banner.style.visibility = 'visible'; // Changes CSS property in the ID #bannerHide
}, 3000); // delay in milliseconds
</script>
</body>
</html>我用 CSS 和 JS 创建了一个横幅。这个想法是在用户点击关闭按钮后保存 cookie 30 天，但由于某种原因，cookie 没有保存。
我希望横幅在用户单击关闭按钮 30 天后关闭并且不会再次弹出。
参见 CodePen
https://codepen.io/timt360/full/MWPEMYq