HTML&；CSS：单击“后隐藏cookie栏”；我接受；

我在一个网站上工作，我想知道在点击“我接受”或其他什么后，如何隐藏cookie通知。我不想使用WebKit，我想要纯HTML（如果需要的话还有CSS），甚至是PHP

#cookie-bar.fixed{
位置：固定；
底部：5；
左：0；
z指数：100；
}
#曲奇吧{
线高：24px；
颜色：#eeeeee；
文本对齐：居中；
填充：3px0；
宽度：100%；
颜色：白色；
背景色：#444；
}
.cb启用{
边界半径：10%；
左边距：100px；
颜色：白色；
填充物：5px；
边界半径：10%；
字体系列：衬线；
文字装饰：无；
过渡色：.3s背景色；
}
.cb启用：悬停{
背景色：深黄色；
}
.cb政策{
颜色：白色；
文字装饰：下划线；
}
.cb策略：悬停{
颜色：深色；
}

我们使用cookies来增强您在我们网站上的体验。通过参观它，你同意我们的建议

您觉得怎么样：

onclick=“parentNode.remove（）”

编辑：

这对我来说似乎很有魅力

onclick="this.parentNode.parentNode.style.display = 'none'"

如果我是正确的，这只会在每次单击时起作用

---

我建议使用：

这是我在所有项目中使用的一段代码。这很容易理解。您所要做的就是在用户单击“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>

COOKIE策略
Blabla cookie免责声明Blabla
好啊
$（函数（）{
$（'#cookie_stop'）。单击（函数（）{
$（“#cookie_免责声明”）.slideUp（）；
var nDays=999；
var cookieName=“免责声明”；
var cookieValue=“true”；
var today=新日期（）；
var expire=新日期（）；
expire.setTime（今天.getTime（）+3600000*24*nDays）；
document.cookie=cookieName+“=”+escape（cookieValue）+“expires=“+expire.TogmString（）+”；路径=/”；
});
});

---

如果您不想使用javascript/jquery，也可以使用表单，但用户会重新加载页面，对我来说，看到使用本地存储存储一个变量来表示cookie是否被接受并不太好。 这只是一个例子。如果要按会话分隔，只需使用localstorage检查会话

JS

CSS

HTML

我们使用cookies来增强您在我们网站上的体验。通过参观它，你同意我们的建议

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;
    }
}

#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;
}

<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>