跳到主要内容
Termlib

UI 组件 · 浮层

Cookie 提示

Cookie Consent

也叫：Cookie 横幅、Cookie 同意提示、隐私同意弹窗、Cookie Banner、Consent Banner、GDPR Banner

网站第一次打开时贴在屏幕底部（或角落）的一条提示，说明网站用了哪些 Cookie，并让访客选择「接受」「拒绝」或「偏好设置」。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

给网站加一个 Cookie 提示：首次访问时在屏幕底部居中显示一个最大宽 720px 的白色卡片（position: fixed，距底部 24px，圆角 16px，带阴影）。左侧是 14px 说明文字，只写网站实际用到的 Cookie 和用途（我会提供清单），后面带「Cookie 政策」链接；右侧三个同样大小的按钮「拒绝」「偏好设置」「全部接受」，拒绝和接受一样醒目。点「偏好设置」打开对话框，按「必要（始终开启）/ 统计 / 广告」三类用开关分别设置。选择结果存到 localStorage，下次不再显示，页脚放一个「Cookie 设置」入口可以随时修改；访客同意之前不要加载统计和广告脚本。容器加 role="region" 和 aria-label="Cookie 提示"；手机上改为贴底整宽，高度不超过屏幕的四分之一。

发给

01判断

你的内容是这样吗？

对照两列，确认Cookie 提示是不是你要找的。

符合这些情况，用Cookie 提示

  • 面向欧盟、英国等有 Cookie 同意要求地区访客的官网和网店
  • 网站用了统计、广告等第三方追踪脚本，需要先征得访客同意
  • 需要让访客随时修改 Cookie 偏好（页脚放一个「Cookie 设置」入口）

是这些情况，换成别的

  • 只用了登录、购物车这类必要 Cookie，且目标地区法规不要求征求同意时，不必弹出（以法务意见为准）

  • 维护通知、新功能提醒

    改用横幅公告轻提示

  • 完成当前页面任务的按钮（保存、结算）

    改用底部操作栏

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只有一个醒目的「接受」按钮，「拒绝」藏在设置里或做成很淡的小字

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    提示条太高，手机上盖住半个屏幕和页面的购买按钮

  3. 03

    访客还没同意，统计和广告脚本就已经加载了

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由固定在屏幕底部或角落的提示条（或小卡片）、一两句说明文字、Cookie 政策链接和「接受 / 拒绝 / 偏好设置」按钮组成，偏好设置常打开一个按类别开关的对话框。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页面底部一整条或角落里的一张小卡片，浮在内容上方
  2. 2一两行说明文字里提到 Cookie，带一个「Cookie 政策」链接
  3. 3旁边两三个按钮，例如接受、拒绝、设置

04解释

详细解释

Cookie 提示是面向欧盟、英国等地区访客的网站常见的一条浮层：屏幕底部一整条，或左下角一张小卡片，一两句话说明网站用 Cookie 做什么，附上「Cookie 政策」链接，旁边是「全部接受」「拒绝」「偏好设置」几个按钮。点「偏好设置」会打开一个对话框，按类别（必要、统计、广告）逐项开关。选完之后记住结果，不再出现。

它也贴在屏幕底部，但不是 底部操作栏：底部操作栏放的是完成当前任务的按钮（保存、提交订单），一直都在；Cookie 提示和页面任务无关，是全站一次性的征求同意，选完就消失。它也不是 横幅公告：横幅公告通知维护、活动，Cookie 提示要访客明确做出选择。偏好设置那一步用的是 对话框。

「拒绝」要和「接受」一样容易点到，不要藏到第二层或做成很淡的文字链接；访客同意之前，不要加载统计和广告脚本。文案只写网站实际用到的 Cookie，不要写没有核实过的「已通过 GDPR 认证」这类合规声明。它是固定定位的浮层，会盖住页面底部，手机上要尽量矮，别挡住底部操作栏和主要按钮。是否需要这个提示、要满足哪些法规，以法务意见为准。

开发者信息
术语 ID
component-cookie-consent
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • #onetrust-banner-sdk
  • #onetrust-consent-sdk
  • #CybotCookiebotDialog
  • .cc-window
  • .cc-banner
  • #cookie-law-info-bar
  • .cky-consent-container
  • .cmplz-cookiebanner
  • #usercentrics-root
  • .qc-cmp2-container
  • .osano-cm-window
  • #truste-consent-track
  • :is(div, section, aside, dialog, form)[class*="cookie" i]:has(button, a[href], [role="button"]):not([class*="cookie" i] *, main *, article *)
  • :is(div, section, aside, dialog, form)[id*="cookie" i]:has(button, a[href], [role="button"]):not([id*="cookie" i] *, main *, article *)
  • :is(div, section, aside, dialog)[class*="consent" i]:has(button):not([class*="consent" i] *, form *, main *, article *)
  • :is(div, section, aside, dialog, [role="dialog"], [role="region"]):is([aria-label*="cookie" i], [aria-labelledby*="cookie" i], [aria-describedby*="cookie" i], [aria-label*="consent" i])
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • cookie-consent
  • cookie-banner
  • cookie-notice
  • cookie-bar
  • cookie-popup
  • cookies
  • cookie
  • consent-banner
  • consent-bar
  • consent-popup
  • gdpr
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • CookieConsent
  • CookieBanner
  • CookieNotice
  • CookieBar
  • ConsentBanner
  • CookiePopup
  • GdprBanner
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 固定在底部
  • 浮在内容上
优先级
5 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30