2018-08-11 admin


什么是cookie-banner,Javascript based cookie-info banner for complying with EU cookie law.


` tag:

<script type="text/javascript" id="cookiebanner"

or via cdnjs:

<script type="text/javascript" id="cookiebanner"

This will display a black-and-white floating banner at the bottom of your web page, informing the user that the site is using cookies, and giving them the link to a page with more information.

When the user clicks the “close” button, the banner will set a cookie (oh, the irony!) remembering that the banner was acknowledged, so the same user will not be bothered again.


If you don’t like the defaults, you can modify the banner content and style. The following options are settable through a data- property on the script tag:

  • height - Banner/notice height (default: 32px)

  • fg - Banner/notice text color (default: #ddd)

  • bg - Banner/notice background color (default: #000)

  • link - Link text color (default: #aaa)

  • position - Banner/notice position, top or bottom (default: bottom)

  • padding - Set custom padding (default: 5px 16px)

  • message - Notice message text

  • linkmsg - Link text content (default: Learn more)

  • close-text - Text/symbol for the .cookiebanner-close element (default: &#10006;)

  • close-style - CSS style for .cookiebanner-close element (default: float:right;padding-left:5px;)

  • close-precedes - Controls whether .cookiebanner-close element precedes or follows the <span> containing the message (default: true)

  • font-size - Text/font size for the .cookiebanner (container) element (default: 14px)

  • font-family - Font family for the .cookiebanner (container) element (default: arial, sans-serif)

  • text-align - Text align/position for the .cookiebanner (container) element (default: center)

  • effect - Effect used when inserting the notice, currently only fade is supported (triggered when cookiebanner is displayed and when it is closed) (default: null)

  • fade-out-duration-ms - Duration in milliseconds of fade-out effect (only if fade effect is specified, default: 2000)

  • cookie - Name for the cookie that stores acceptance info (default: cookiebanner-accepted)

  • expires - Cookie expiry date/time (defaults to Infinity aka Fri, 31 Dec 9999 23:59:59 GMT). There’s basic support for specifying a callback function (more flexibility, must return one of Number, String, or Date – see Cookies.set()). You can also just specify a valid UTC string. When specified as a “numeric string”, it is treated as number of seconds from now. So, expires: '90' or data-expires="90" would expire the cookie in 90 seconds.

  • cookie-path - Path to set for the cookie

  • cookie-domain - Set a custom cookie domain (default: null)

  • cookie-secure - Set (true/false) secure cookie for HTTPS (default: false)

  • moreinfo - Link where the visitor can read more about cookies (default:

  • moreinfo-target - Target for moreinfo link (default: _blank)

  • moreinfo-decoration - Text decoration for moreinfo link (default: none)

  • moreinfo-font-weight - Font weight for moreinfo link (default: normal)

  • moreinfo-font-size - Font size (i.e 12px) for moreinfo link (default: null)

  • moreinfo-rel - Rel attribute value for moreinfo link (default: noopener noreferrer). Set to false or `` if you wish to disable it.

  • mask - Controls whether a mask is created over the viewport (default: false). Clicking anywhere on the mask is considered as acceptance.

  • mask-opacity - Opacity used for the window mask (default: 0.5)

  • mask-background - CSS background style applied to the mask

    (default: #000)

  • zindex - Z-index set on the notice (default: 255). If mask is used, the notice

    's z-index is automatically incremented by 1 so it appears above the mask.

  • accept-on-scroll - When true, agrees and closes the notice when window is scrolled. (default: false)

  • accept-on-click - When true, agrees and closes the notice when clicking anywhere on the page. (default: false)

  • accept-on-first-visit - When true, agrees automatically (which stops showing the notice for subsequent requests), but the notice is not automatically closed. (default: false)

  • accept-on-timeout - Automatically agrees and closes the notice after specified number of milliseconds. (default: null)

  • on-inserted - A function which gets executed after the banner is inserted in the DOM (default: null)

  • on-closed - A function which gets executed after the banner is closed (default: null)

  • delay-before-close - Wait N milliseconds before closing the notice. (default: null)

  • debug - When true, closes the banner without setting the cookie (default: false)

Here’s an example:

<script type="text/javascript" id="cookiebanner"
    data-height="20px" data-position="top"
    data-message="We use cookies to improve your browsing experience.">


If you don’t want to depend on cdnjs or jsdelivr, copy the cookiebanner.min.js file directly to your site and serve it yourself.

If you want to compile cookiebanner with the rest of your application’s javascript, you can call it with options as follows:

<script type="text/javascript">
      var options = { message: "We use cookies to enhance your experience.", moreinfo: "/about/cookies" };
      var cb = new Cookiebanner(options);;

Internals and more options

If the banner needs to be shown, the script will create the following DOM subtree by default and add it just before the closing </body> tag:

<div class="cookiebanner">
    <div class="cookiebanner-close" style="float: right; padding-left:5px;">&#10006;</div>
    <span>Message. <a rel="noopener noreferrer" href=".." target="_blank">Learn more</a></span>

If the close-precedes option is sto to false (added in 1.2.1), the DOM looks slightly different:

<div class="cookiebanner">
    <span>Message. <a rel="noopener noreferrer" href=".." target="_blank">Learn more</a></span>
    <div class="cookiebanner-close" style="float: right; padding-left:5px;">&#10006;</div>

You can use CSS with div.cookiebanner > span and div.cookiebanner > a to further modify the banner appearance.

You can also try customizing the close button via the .cookiebanner-close CSS class. Keep in mind that you might have to override and/or reset certain properties by using !important CSS rules.

Event-Handlers (Callbacks)

There are two ways you can utilize event handlers like i.e. on-inserted.

Within JS (recommended):

<script type="text/javascript">
      var options = { onInserted: function (instance) { console.log('Hey, I got inserted!') } };
      var cb = new Cookiebanner(options);;

As a data-attribute:

<script type="text/javascript" id="cookiebanner"
    data-on-inserted="function (instance) { console.log('Hey, I got inserted!'); }">


转载请注明:文章转载自 JavaScript中文网 []