Добавляем куки cookie

Достали из нашей базы в ЛК, отряхнули от спана Espo и выкатили сюда. Код — чёрные блоки, как любим.

Тело уведомления:

<div id="cookie_note">

        <p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании файлов cookie, <a href="" target="_blank">нажмите здесь</a>.</p>

        <button>Я согласен</button>

</div>


Скрипт:

<script>

        function setCookie(name, value, days) {

            let expires = "";

            if (days) {

                let date = new Date();

                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

                expires = "; expires=" + date.toUTCString();

            }

            document.cookie = name + "=" + (value || "") + expires + "; path=/";

        }

    

        function getCookie(name) {

            let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));

            return matches ? decodeURIComponent(matches[1]) : undefined;

        }

        function checkCookies() {

            let cookieNote = document.getElementById('cookie_note');

            let cookieBtnAccept = cookieNote.querySelector('.cookie_accept');

        

            // Если куки cookies_policy нет или она просрочена, то показываем уведомление

            if (!getCookie('cookies_policy')) {

                cookieNote.classList.add('show');

            }

        

            // При клике на кнопку устанавливаем куку cookies_policy на один год

            cookieBtnAccept.addEventListener('click', function () {

                setCookie('cookies_policy', 'true', 365);

                cookieNote.classList.remove('show');

            });

        }

        checkCookies();

    </script>


CSS:

<style>
#cookie_note{
display: none;
gap: 5px;
align-items: center;
justify-content: center;
position: fixed;
max-width:900px;
z-index: 10;
bottom: 15px;
left: 50%;
width: 90%;
transform: translateX(-50%);
padding: 10px;
background-color: white;
border-radius: 4px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}
#cookie_note.show { display: flex; }
#cookie_note>button {
width: 270px;
font-size: 10px;
line-height: 25px;
color: white;
background: black;
padding: 5px;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: none;
}
#cookie_note>button:hover {
background-color: #FF3D00;
}
#cookie_note p{
margin: 0;
font-size: 0.7rem;
line-height:1.2;
text-align: left;
color: black;
}
@media (max-width: 991px) {
#cookie_note{ flex-direction:column; }
}
</style>

Комментарии


Комментарии (0)



Разрешённые теги: <b><i><br>Добавить новый комментарий: