CCPA Modal every 14 days

California Consumer Privacy Act, cookie, privacy policy modal every 14 days

by Amy Ruddy

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">

    <title>CCPA modal</title>
  </head>
  <body>
  <div id="background">
   <div id="container">
      <div class="text-center my-3">
      <h1>
      California Consumer Privacy Act
      </h1>
      <p>
      Show the privacy modal until the user acknowledges by clicking "Got It". 
      </p>
       <p>
      Once "Got it" is clicked, the modal will no longer display on refresh until 14-days.
      </p>

      <div class="my-3">
        <button class="btn btn-light" onClick="window.location.reload();">Refresh Page</button>
      </div>
        <p>
      Note: This functions outside of Fiddle. I beleive Fiddle is blocking collecting and checking cookies.
      </p>
    </div>
   </div>
    <div id="ccpa-notice-modal">
            <div id="ccpa-notice" class="ccpa-notice container" role="complementary" aria-label="CCPA Notice">
                <div>
                    <p>PRIVACY NOTICE: This website uses cookies and similar technologies to manage your sessions, manage content, and improve your website experience. To learn more about these technologies, your options, and about other categories of personal information we collect through this website and how we may use it, please see our <a href="#!" target="_blank" class="text-nowrap">privacy policy</a>. This notice is effective for your use of this website for the next 14 days.</p>
                </div>
                <button id="ccpa-gotit" class="btn btn-primary">Got It</button>
            </div>
        </div>
        </div>
  </body>
</html>

CSS

#background {
  background: linear-gradient(rgba(100, 150, 255, 0.5), rgba(100, 153, 174, 0.5)), url("https://images.unsplash.com/photo-1438401171849-74ac270044ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80") no-repeat fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
}

#container {
  background-color: rgba(255,255,255, 0.55);
  margin: 1% 5%;
}

#ccpa-notice-modal {
  display: none;
  background-color: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  position: fixed;
  bottom: 0;
  z-index: 10000;
  width: 98%;
  margin: 1%;
  padding: 20px; }
 

.ccpa-notice {
  display: flex;
  align-items: center;
  flex-direction: column; }
  .ccpa-notice p {
    font-size: 11pt;
    float: left;
    margin: 0;
    display: block;
    margin: 0 0 0.5rem 0; }
  @media (min-width: 576px) {
    .ccpa-notice {
      flex-direction: row; }
      .ccpa-notice p {
        margin: 0 1rem 0 0; } }
#ccpa-gotit {
  flex-shrink: 0;
}

JavaScript

function createCookie(name, value, days) {

    var date, expires;

    if (days) {

        date = new Date();

        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

        expires = "; expires=" + date.toUTCString();

    } else {

        expires = "";

    }

    document.cookie = name + "=" + value + expires + "; path=/";

}

function readCookie(name) {

    var nameEQ = name + "=";

    var ca = document.cookie.split(';');

    for (var i = 0; i < ca.length; i++) {

        var c = ca[i];

        while (c.charAt(0) == ' ') c = c.substring(1, c.length);

        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

    }

    return null;

}

ccpaNotice = function () {

    if (readCookie('acceptCCPA') !== 'true') {

        $('#ccpa-notice-modal').fadeIn(1000);

    }

    $('#ccpa-gotit').click(function () {

        createCookie('acceptCCPA', 'true', 14);

        $('#ccpa-notice-modal').fadeOut(1000);

    });

}

    $(window).on('load', ccpaNotice());