Вариантов реализации механизма вывода предупреждения об использовании Cookies в сети много. Тут оставляю вариант вывода предупреждения в виде модального диалога с использованием Material Design for Bootstrap 5.
Для определения самого диалога формируем блок:
<div class="modal fade" id="cookiesModal" tabindex="-1" aria-labelledby="cookiesModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Использование Cookies</h5>
</div>
<div class="modal-body">
<p>На нашем сайте мы используем файлы cookie для улучшения работы сайта. Продолжая использовать наш сайт,
вы соглашаетесь с использованием файлов cookie.</p>
</div>
<div class="modal-footer">
<button id="cookiesAccept" type="button" class="btn btn-danger">Соглашаюсь</button>
</div>
</div>
</div>
</div>
А в подключаемом скрипте к страницам прописываем следующий код:
// обработка куков
if (!localStorage.getItem("cookieAccept") || localStorage.getItem("cookieAccept") == 0) {
const myModalEl = document.getElementById("cookiesModal");
const modal = new mdb.Modal(myModalEl);
modal.show();
$("#cookiesAccept").on("click", function () {
localStorage.setItem("cookieAccept", 1);
modal.toggle();
});
}
$(document).ready(function () {
// ...
});