我在一个网站上工作,我想知道如何在点击"我接受"或其他什么之后隐藏cookie通知。我不想使用webkit,我想要纯HTML(如果需要的话还有CSS),甚至PHP。
#cookie-bar.fixed {
position: fixed;
bottom: 5;
left: 0;
z-index: 100;
}
#cookie-bar {
line-height: 24px;
color: #eeeeee;
text-align: center;
padding: 3px 0;
width: 100%;
color: white;
background-color: #444;
}
.cb-enable {
border-radius: 10%;
margin-left: 100px;
color: white;
padding: 5px;
border-radius: 10%;
font-family: serif;
text-decoration: none;
transition: .3s background-color;
}
.cb-enable:hover {
background-color: darkcyan;
}
.cb-policy {
color: white;
text-decoration: underline;
}
.cb-policy:hover {
color: darkcyan;
}
<div id="cookie-bar" class="fixed">
<p>We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="/privacy-policy/#cookies" class="cb-policy">Cookies Policy</a>
<a href="#" class="cb-enable">I Understand</a>
</p>
</div>
非常感谢。
这是我在所有项目中使用的一段代码。这很容易理解。您所要做的就是在用户单击"ok"后使用javascript创建一个cookie,然后检查cookie是否已设置。如果是,则不会显示免责声明。
<?if (!isset($_COOKIE["disclaimer"])){?>
<div id="cookie_disclaimer">
<div>
<div class="titolo">COOKIE POLICY</div>
blablabla cookie disclaimer blablabla
<span id="cookie_stop">Ok</span>
</div>
</div>
<?}?>
<script type="text/javascript">
$(function(){
$('#cookie_stop').click(function(){
$('#cookie_disclaimer').slideUp();
var nDays = 999;
var cookieName = "disclaimer";
var cookieValue = "true";
var today = new Date();
var expire = new Date();
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString()+";path=/";
});
});
</script>
如果你不想使用javascript/jquery,你可以用表单做同样的事情,但用户会重新加载页面,对我来说,看到
使用本地存储来存储一个变量,说明是否接受cookie。这只是一个例子。如果你想按会话分开,你只需要使用本地存储来检查你的会话。
JS-
window.onload = function(){
try {
if(localStorage.getItem("cookie-enable")!="1"){
document.getElementById("cookie-bar").style.display="block";
}
document.getElementById("save-cookie-example").addEventListener( "click", function() {
localStorage.setItem("cookie-enable", "1");
document.getElementById("cookie-bar").style.display="none";
} );
} catch( e ) {
return false;
}
}
CSS
#cookie-bar.fixed {
position: fixed;
bottom: 5;
left: 0;
z-index: 100;
}
#cookie-bar {
line-height: 24px;
color: #eeeeee;
text-align: center;
padding: 3px 0;
width: 100%;
color: white;
background-color: #444;
display:none;
}
.cb-enable {
border-radius: 10%;
margin-left: 100px;
color: white;
padding: 5px;
border-radius: 10%;
font-family: serif;
text-decoration: none;
transition: .3s background-color;
}
.cb-enable:hover {
background-color: darkcyan;
}
.cb-policy {
color: white;
text-decoration: underline;
}
.cb-policy:hover {
color: darkcyan;
}
HTML
<div id="cookie-bar" class="fixed">
<p>We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="/privacy-policy/#cookies" class="cb-policy">Cookies Policy</a>
<a href="#" id="save-cookie-example"class="cb-enable">I Understand</a>
</p>
</div>
你怎么看:onclick="parentNode.remove()"
编辑:
这对我来说似乎很有魅力?
onclick="this.parentNode.parentNode.style.display = 'none'"
JSFiddle
如果我是正确的,这只会在你每次点击时起作用。
我建议使用:http://plugins.jquery.com/cookie/