HTML & CSS : Hiding the cookie bar after clicking on "I accept"

Question

我在一个网站上工作，我想知道如何在点击“我接受”或其他内容后隐藏 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>

非常感谢。

Answer 1

这是我用于所有元素的代码片段。这很容易理解。您所要做的就是在用户单击“确定”后使用 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，你可以做同样的事情，但是使用一个表单，但是用户会看到页面重新加载，对我来说这不是很好看