安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
纯CSS及JavaScript实现的响应式 cookie 提示框,只需 30 秒即可完成设置!
编号:Cookie提示框

纯CSS及JavaScript实现的响应式 cookie 提示框,只需 30 秒即可完成设置!

大小 280 KB
总文件 6 个
发布 2024-03-28
更新 2026-01-17
架构 CSS + JavaScript
分类 前端资源 - 弹出框与提示
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款利用 CSS 搭配 JavaScript 实现的响应式 Cookie 提示框,该提示框简单易用只需 30 秒即可完成设置,提示框会出现在网站的底部页脚部位,支持响应式,在移动端也能良好展示,如下图1所示,同时支持背景色、语言、Cookie时间、文本颜色、提示框大小等多种属性的自定义,具体自定义方式及使用方式会在下方提供。

image.png

图1(移动端显示样例)

使用方法:

1、引入下载的文件

cookie-consent-box.min
cookie-consent-box.min.js

2、调用初始化方法,可自定义选项

<script>CookieBoxConfig = { backgroundColor: '#ec008c', url: '/privacy-policy' }</script>

可自定义的选项:

选项类型默认值描述
背景颜色string#007bff用于背景的颜色
文字颜色string#fff用于文本的颜色
语言stringenISO 639 代码。支持的语言:en, de, pl, ro, it, fr,pt
网址string/nullnull指向您的隐私政策页面的自定义 URL。如果为空,链接将自动隐藏。
链接目标string_blanktarget上面的 url 的参数。
容器宽度int1140页面容器的宽度
cookie密钥stringcookie-box用于保存用户接受程度的Cookie名称
cookie域string默认为hostcookie所属的域
cookie 过期天数int365Cookie 过期的天数
内容object/null默认语言内容对象接受以下属性:title、content、accept、learnMore。

模板目录结构

    免责声明

    • 如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
    • 以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
    • 如有侵犯你版权的,请来信(邮箱:tongzhewangluo@163.com)指出,核实后本站将立即改正。
    • 如有链接无法下载、失效或广告,请通过网站提供的微信联系作者!
    • 以上资源售价只是赞助,不代表代码或者素材本身价格,收取费用仅维持本站的服务器开销。
    • 所有代码素材效果均为演示打包,最终效果请参考演示效果,本站不提供任何技术支持和服务。
    • 代码素材均为虚拟物品,演示和描述无错的情况下,无法进行退换服务。

    最新资源

    网络安全企业专用 HTML 响应式网站模板,暗黑风信息安全服务响应式建站方案

    克睿盾

    网络安全企业专用 HTML 响应式网站模板,暗黑风信息安全服务响应式建站方案
    SaaS企业与IT服务科技公司专用 Bootstrap 网站模板

    睿博智

    SaaS企业与IT服务科技公司专用 Bootstrap 网站模板
    在线课程与教育 LMS 系统 HTML 响应式网站模板

    学伴

    在线课程与教育 LMS 系统 HTML 响应式网站模板
    AI人工智能科技企业专用 Bootstrap 网站模板

    艾沃拉

    AI人工智能科技企业专用 Bootstrap 网站模板
    个人作品集与自由职业者专用 HTML 响应式网站模板

    奥锐

    个人作品集与自由职业者专用 HTML 响应式网站模板
    React手绘涂鸦风格海滩日落:基于Rough.js的创意插画特效

    蜡笔涂鸦

    React手绘涂鸦风格海滩日落:基于Rough.js的创意插画特效