JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="cookies-notification__wrapper" id="cookies-notification">
    <p class="smallbold__text green__text">Важно!</p>
    <button class="icon__button cookies-notification__close-btn" id="close-cookies-notification">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.707 7.293a1 1 0 00-1.414 0L12 12l-4.707 4.707a1 1 0 001.414 1.414L12 13.414l4.707 4.707a1 1 0 001.414-1.414L13.414 12l4.707-4.707a1 1 0 00-1.414-1.414L12 10.586 8.707 7.293z" fill="#242529"/>
        </svg>
    </button>
    <p class="small__text black__text cookies-notification__text">
        <?=GetMessage('COOKIES_NOTIFICATION')?>
    </p>
    <div class="flex__buttons">
        <button class="button button__text" id="accept-cookies">ОК</button>
    </div>
</div>

CSS

.cookies-notification__wrapper {
    border-radius: 32px;
    padding: 32px;
    background-color: var(--color-grey);
    box-shadow: var(--box-shadow);
    position: fixed;
    bottom: 30px;
    right: calc((100vw - 1322px) / 2);
    max-width: 350px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10000; /* Высокий z-index для перекрытия других модалок */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    backdrop-filter: blur(5px); /* Размытие фона */
    -webkit-backdrop-filter: blur(5px); /* Для поддержки в WebKit-браузерах */
}

.cookies-notification__wrapper.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cookies-notification__close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.cookies-notification__text {
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.5;
}

.flex__buttons {
    display: flex;
    justify-content: center;
}

.button.button__text {
    background-color: var(--color-green);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.button.button__text:hover {
    background-color: darken(var(--color-green), 10%);
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .cookies-notification__wrapper {
        right: 10px;
        left: 10px;
        max-width: none;
        width: calc(100% - 20px);
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const cookiesNotification = document.getElementById('cookies-notification');
    const acceptCookiesButton = document.getElementById('accept-cookies');
    const closeCookiesButton = document.getElementById('close-cookies-notification');

    // Проверяем, согласился ли пользователь с cookie ранее
    if (!localStorage.getItem('cookiesAccepted')) {
        cookiesNotification.classList.add('active');
    }

    // Обработчик для кнопки "ОК"
    acceptCookiesButton.addEventListener('click', function() {
        localStorage.setItem('cookiesAccepted', 'true');
        cookiesNotification.classList.remove('active');
    });

    // Обработчик для кнопки закрытия
    closeCookiesButton.addEventListener('click', function() {
        localStorage.setItem('cookiesAccepted', 'true');
        cookiesNotification.classList.remove('active');
    });
});