Question

我试图做每个页面现在的典型弹出窗口。＆＃34;本网站使用cookies。继续浏览本网站，即表示您同意我们使用cookies。＆＃34;

我已创建此代码，通过单击关闭按钮使弹出消息显示，但每次加载页面时，弹出窗口仍然可见...

我还想知道这些弹出窗口的正常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弹出窗口

2 个答案: