Предупреждение об использовании Cookies

---

Вариантов реализации механизма вывода предупреждения об использовании 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();
  });
}

Замечания

1. Данное решение предполагает использование Material Design for Bootstrap 5 и JQuery 3.*
2. Хотя можно использовать и Bootstrap 5, но тогда разметку блока модального окна и скрипт нужно будет немного исправить
3. При использовании MODX Revolution блок с разметкой лучше поместить в отдельный чанк и подключить его ко всем используемым шаблонам страниц
4. JavaScript код лучше всего разместить в самом последнем подключаемом скрипте, выше которого подключаются вышеупомянутые MDB5 и JQuery. И обязательно размещать в блок, который выполняется после загрузки страницы:

$(document).ready(function () {
 // ...
});