bs-cookie-notice
Version:
A simple cookie consent notice alert for Bootstrap 4 without require jQuery
84 lines (71 loc) • 3.39 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Cookie Notice</title>
<!-- Bootstrap 4.3.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body class="bg-white">
<div class="container">
<div class="card bg-white" style="margin-top: 70px">
<div class="card-header">
<h2>Bootstrap Cookie Notice</h2>
<button class="btn btn-primary" id="resetNotice">Reset</button>
<button class="btn btn-primary" id="toggleLight">Toggle Light</button>
</div>
<div class="card-body">
<div id="fillme"></div>
</div>
</div>
</div>
<!-- Only for the demo -->
<script>
document.querySelector("#toggleLight").addEventListener("click", toggleLight);
document.querySelector("#resetNotice").addEventListener("click", function() {
var name = "acceptCookies";
document.cookie = name + '=;Path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
window.location.reload();
});
for (var i = 1; i <= 150; i++) {
document.querySelector("#fillme").innerHTML += "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ";
}
function toggleLight() {
var body = document.querySelector("body");
var card = document.querySelector(".card");
if (body.className === 'bg-white') {
color = {
bg: "bg-dark",
notice: "light",
text: "text-white",
};
} else {
color = {
bg: "bg-white",
notice: "dark",
text: "text-normal",
};
}
body.className = "";
body.classList.add(color.bg);
card.className = "";
card.classList.add('card');
card.classList.add(color.bg);
card.classList.add(color.text);
notice = new BsCookieNotice({
color: color.notice,
});
}
</script>
<!-- Include script -->
<script src="src/bs-cookie-notice.js"></script>
<!-- Configure notice -->
<script type="text/javascript">
notice = new BsCookieNotice();
</script>
</body>
</html>