Cookies without plugins
The code provided is an HTML document that represents a cookie policy notification banner. The CSS part of the code defines the appearance of the banner and gives a stylish design to the links, text and buttons it contains. The JavaScript part of the code handles displaying and hiding the banner based on the user’s cookie consent. It also stores information in local storage to ensure that the banner is not displayed again after consent.
<style>
/* Cookie Law Banner Styles */
#cookie-law-div {
z-index: 10000000;
position: fixed;
bottom: 3%;
left: 2%;
padding: 1em;
max-width: 400px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
font-size: 15px;
box-shadow: rgba(23, 43, 99, 0.4) 0 7px 28px;
}
@media (max-width: 600px) {
#cookie-law-div {
border-radius: 0;
max-width: 100%;
right: 0;
bottom: 0;
}
}
/* Link Styles */
#cookie-law-div a {
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
#cookie-law-div a:hover {
opacity: 0.7;
}
/* Text Paragraph Styles */
#cookie-law-div p {
margin: 0;
color: #000;
padding-right: 50px;
}
/* Accept Button Styles */
#cookie-law-div button {
position: absolute;
right: 0.5em;
top: 20px;
align-self: center;
line-height: 1;
color: #fff;
background-color: #000;
border: none;
opacity: 0.6;
font-size: 12px;
cursor: pointer;
border-radius: 50px;
}
#cookie-law-div button:hover {
opacity: 1;
}
</style>
<script>
// Cookie Law JavaScript
cookieLaw = {
dId: "cookie-law-div",
bId: "cookie-law-button",
iId: "cookie-law-item",
show: function (e) {
if (localStorage.getItem(cookieLaw.iId)) return false;
var o = document.createElement("div"),
i = document.createElement("p"),
t = document.createElement("button");
i.innerHTML = e.msg;
t.id = cookieLaw.bId;
t.innerHTML = e.ok;
o.id = cookieLaw.dId;
o.appendChild(t);
o.appendChild(i);
document.body.insertBefore(o, document.body.lastChild);
t.addEventListener("click", cookieLaw.hide, false);
},
hide: function () {
document.getElementById(cookieLaw.dId).outerHTML = "";
localStorage.setItem(cookieLaw.iId, "1");
},
};
cookieLaw.show({
msg: "We are using essential <a href='YOUR-COOKIES-LINK-GOS-HERE'>Cookies</a>",
ok: "OK",
});
</script>