设置 cookie 弹出窗口

Question

我正在尝试制作每个页面现在都有的典型弹出窗口。 "This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies."

我创建了这段代码，通过单击关闭按钮使弹出窗口消失，但每次加载页面时，弹出窗口仍然可见...

我还想知道此类弹出窗口的正常 cookie 过期时间是多少...

你能帮帮我吗？

HTML5

<div id="cookies_alert">
  <div class="cookies_container">
    <div class="cookies_close"></div>
       <div class="cookies_text">This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.</div>
  </div>    
</div>

CSS3

    #cookies_alert {
    bottom: 20px;
    height: auto;
    left: 0;
    margin: 0 auto;
    padding: 0;
    position: fixed;
    right: 0;
    width: 320px;
    z-index: 998;

    -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}

#cookies_alert.closed {
    bottom: -120px;

    -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}

#cookies_alert .cookies_container {
    background-color: rgba(0,0,0,0.85);
    padding: 15px;
    padding-right: 35px;
    position: relative;
}

#cookies_alert .cookies_close {
    background-image: url("../images/menu.svg");    
    background-position: center -13px;
    background-size: 13px;
    height: 13px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 13px;
}

#cookies_alert .cookies_close:hover { cursor: pointer; }

#cookies_alert .cookies_text {
    color: #FFF;
    font-family: Comfortaa;
    font-size: 0.8em;
}

#cookies_alert .cookies_text a { color: #EA504E; }

#cookies_alert .cookies_text a:hover { text-decoration: underline; }

JS

$('.cookies_close').on('click', function () {
    if($.cookie('Terms')){
        $('#cookies_alert').addClass("closed");
    } else {
        $.cookie('Terms', 'Terms', { expires: 7 });
        $('#cookies_alert').removeClass("closed");
    }
});

P.D.: 我正在使用 JQuery Cookies 插件... https://plugins.jquery.com/cookie/

Answer 1

我认为您的弹出窗口在刷新页面时可见，因为您在 .cookies_close 单击时检查了 cookie。我会做这样的事情：

$(document).ready(function(){

if($.cookie('Terms')){
    $('#cookies_alert').addClass("closed");
}

$('.cookies_close').on('click', function () {
    $.cookie('Terms', 'Terms', { expires: 7 });
    $('#cookies_alert').addClass("closed");
});
});

Answer 2

就我个人而言，要使此 cookie 政策过期，我会使用如下方式：

if (window.localStorage) {
  // Check if the user is already accepted the cookie policy
  if (!localStorage.getItem("userAgreed")) {
    $("#cookies_alert").show();
  } else {
    $("#cookies_alert").hide();
  }
}


// On click agree
$("#cookies_alert button").on("click", function(event) {
  event.preventDefault();
  localStorage.setItem("userAgreed", true);
  $("#cookies_alert").hide();
});

// On click of close button
$("#cookies_alert a.close").on("click", function(event) {
  event.preventDefault();
  $("#cookies_alert").hide();
});

我相信大多数网站的默认 cookie 过期时间是一个月。

设置 cookie 弹出窗口

Setting a cookie pop-up

html

css

cookies

jquery