JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="cookie-info" style="display:none; position:fixed; bottom:0; z-index: 1000; width: 800px; margin-left: -411px; left: 50%; background: #fff; border: 1px solid #909090; font-size: 12px; padding: 0;">
<p style="padding: 3px 10px; background: #CCC; color: #000; border-bottom: 1px solid #aaa; margin-top: 0">
Informacja o ciasteczkach
<a class="close-info" style="float: right" href="">Ukryj komunikat</a>
<a style="margin-right: 1em; float: right" href="/cookies/">Więcej informacji</a>
</p>
<div style="padding: 0 10px;">
<p>
Tak jak wiele innych serwisów, używamy „ciasteczek” by sprawdzać jak nasza strona jest przez państwo używana (np. liczymy liczbę odwiedzających).
W swojej przeglądarce, mogą państwo skonfigurować to jak ciasteczka działają.
Korzystając z serwisu bez zmian konfiguracji swojej przeglądarki wyrażają państwo zgodę na to byśmy mogli dalej korzystać z ciasteczek zapisanych w państwa przeglądarce.
</p>
</div>
</div>
</body>
JavaScript
(function ($) {
$(document).ready(function () {
var $popup = $("#cookie-info");
if ($popup.length < 1) {
// nothing to show
return;
}
function readCookie(key) {
var rv = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie);
if (rv != null){
return rv[1];
}
return rv;
}
var key = 'cookie-info';
var info = readCookie(key);
console.debug("info=", info);
if (info == '1') {
// cookie set - already informed
return;
}
function setCookie(key, value) {
var expires = new Date();
expires.setDate(expires.getDate() + 365);
var c = [encodeURIComponent(key), '=', value, '; path=/', '; expires=' + expires.toUTCString()].join('');
console.debug("c=", c);
return document.cookie = c;
}
setCookie(key, 0);
info = readCookie(key);
console.debug("info=", info);
if (info != 0) {
// cookies disabled
console.debug("cookies disabled");
return;
}
$popup.find(".close-info").click(function(e) {
e.preventDefault();
setCookie(key, 1);
$popup.hide();
});
console.debug("show=");
$popup.show();
});
})(jQuery);