Cookie Disclaimer Popup

For a basic Cookie Disclaimer, you may use the example below.

For an advanced GDPR compliant cookie disclaimer for clients serving the EU that require the aility to turn off cookies, check out the Open Source Edition of cookieconsent.js.

Example

CSS

        
          /* Cookie Disclaimer */
          #cookie-disclaimer { position: fixed; bottom: 10px; right: 10px; background: var(--gray); padding: 20px; z-index: 99999; border-radius: 4px; display: flex; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 2px 4px rgba(0, 0, 0, 0.23); align-items: center; }
          #cookie-disclaimer p { margin: 0; }
          #cookie-disclaimer a { text-decoration: underline; }
          #cookie-disclaimer button { border: 0; border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 10px 25px; margin-left: 15px; transition: 0.4s; }
          #cookie-disclaimer button:hover { background: #fff; color: var(--primary); }

Javascript

        
    // Cookie Disclaimer
    function showDisclaimer() {
       var shownDate = new Date();
       shownDate.setDate(shownDate.getDate() + 1); //Set Expiration for 1 day from now
       $('body').append(`      <div id="cookie-disclaimer" class="animated-slow animate-5 fadeInRight">        <p>          This website uses cookies to ensure you get the best experience on our website. <a href="/privacy-policy">Learn More</a>        </p>        <button type="button">Got it!</button>      </div>      `)
    };

    function loadDisclaimer() {
       var currentDate = Date();
       var expDate = localStorage.getItem('shownDate');
       if ( localStorage.getItem('disclaimer') != 'shown' || Date.parse(expDate) < Date.parse(currentDate) ) {
         showDisclaimer();
       }
    };

    loadDisclaimer();

    $('#cookie-disclaimer button').click(function(){
      $('#cookie-disclaimer').fadeOut();
      localStorage.setItem('disclaimer', 'shown');
      localStorage.setItem('disclaimerDate', shownDate);
    });