Cookies Modal - Скрипт для управления куки

Возможности

🍪

Модальное окно о куки

Красивое и функциональное модальное окно для уведомления пользователей об использовании куки на сайте.

🔗

GET-параметры

Все настройки передаются через GET-параметры в URL скрипта. Никаких дополнительных конфигураций.

📱

Адаптивный дизайн

Отлично работает на всех устройствах - от мобильных телефонов до больших экранов.

⚡

Простая интеграция

Подключается одной строкой кода с атрибутом defer/async. Никаких сложных настроек и зависимостей.

🎨

Кастомные стили

Подключите свой файл стилей через параметр style-url для полной кастомизации внешнего вида.

🔧

Гибкая настройка

Настраивайте ссылку на политику конфиденциальности, отображение иконки и другие параметры.

Примеры подключения

Базовое подключение

<!-- Подключение скрипта с обязательным атрибутом defer -->
<script src="cookies.min.js" defer></script>

С ссылкой на политику конфиденциальности

<script src="cookies.min.js?policy-url=https://example.com/privacy" async defer></script>

С ссылкой на согласие на обработку ПД

<script src="cookies.min.js?agree-url=https://example.com/soglasie" async defer></script>

С отображением иконки

<script src="cookies.min.js?icon=true&policy-url=https://example.com/privacy" async defer></script>

Класс для кнопки

<script src="cookies.min.js?btn-class=test" async defer></script>

С кастомными стилями

<script src="cookies.min.js?style-url=https://example.com/my-cookies-styles.css&icon=true" async defer></script>

Количество дней (сессия при 0)

<script src="cookies.min.js?days=5" async defer></script>

Полный пример с всеми параметрами

<script src="cookies.min.js?policy-url=https://example.com/privacy&das=5&icon=true&style-url=https://example.com/custom.css&btn-class=test+test-one" async defer></script>

Важно: Для более эффективной работы скриптов рекомендуется использовать атрибуты async или defer.

Совет: Для параметров policy-url и style-url можно использовать как абсолютные, так и относительные URL — оба варианта поддерживаются. Выбор зависит от структуры вашего сайта и контекста использования.

Параметры

Параметр	Описание	По умолчанию	Пример
policy-url	Ссылка на политику конфиденциальности	/politika	https://example.com/privacy
agree-url	Ссылка на согласие на обработку ПД	/soglasie	https://example.com/soglasie
icon	Отображение иконки куки	false	true
style-url	Ссылка на кастомный файл стилей	Не задано	https://example.com/styles.css
btn-class	CSS-класс, который будет применён к кнопке согласия	Не задано	test \| test+test-small \| test%20test
days	Задать количество дней жизни куки (сессия при 0)	Не задано	5

Пример пользовательского текста о файлах cookie

Важно: данная часть должна быть объявлена раньше инициализации скрипта

<script>
    const textCookies = "Здесь может располагаться ваш текст о файлах cookie. {politika target='_blank'}Так прописывается политика к тексте{/politika}. {soglasie target='_blank'}А так согласие{/soglasie}"
</script>

Пример кастомного CSS файла

                
/* custom-cookies-styles.css */
:root {
    /* Основные цвета и фон */
    --cookies-bg: hsl(220, 26%, 14%);

    /* Тень */
    --cookies-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);

    /* Радиус и отступы */
    --cookies-radius: 15px;
    --cookies-padding: 25px;

    /* Позиционирование */
    --cookies-left: 30px;
    --cookies-bottom: 30px;
    --cookies-left-mobile: 15px;
    --cookies-bottom-mobile: 15px;

    /* Отступы между элементами */
    --cookies-line-gap: 15px;
    --cookies-marginn-top-elements: 20px;

    /* Иконка */
    --cookies-icon-size: 45px;
    --cookies-icon-font-size: 20px;
    --cookies-icon-border: 50%;
    --cookies-icon-bg: hsl(142, 71%, 45%);
    --cookies-icon-color: hsl(0, 0%, 100%);

    /* Заголовок */
    --cookies-title-size: 1.4rem;
    --cookies-margin-top: 0;
    --cookies-margin-bottom: 10px;
    --cookies-margin-left: 0;
    --cookies-margin-right: 0;

    /* Текст */
    --cookies-text-color: hsl(0, 0%, 90%);
    --cookies-text-link: hsl(142, 71%, 65%);
    --cookies-text-link-hover: hsl(142, 71%, 75%);

    /* Кнопка */
    --cookies-btn-bg: hsl(142, 71%, 45%);
    --cookies-btn-bg-hover: hsl(142, 71%, 55%);
    --cookies-btn-text-color: hsl(0, 0%, 100%);
    --cookies-btn-text-color-hover: hsl(0, 0%, 100%);
    --coolies-btn-radius: 8px;
    --cookies-btn-padding: 12px 25px;
}

/* Дополнительные стили для темной темы */
#cookies {
    backdrop-filter: blur(10px);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
}

#cookies-title {
    color: hsl(0, 0%, 95%);
    font-weight: 600;
}

#cookies-btn {
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

#cookies-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

/* Анимация появления */
#cookies {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Важно: Убедитесь, что ваш кастомный CSS файл доступен по указанному URL.

🍪 Cookies Modal

Возможности

Модальное окно о куки

GET-параметры

Адаптивный дизайн

Простая интеграция

Кастомные стили

Гибкая настройка

Как это выглядит

Примеры подключения

Параметры

Скачать

Cookies Modal v{{VERSION}}

Минифицированная

Наш сайт использует cookies