Código para Box automático de aviso de cookies para site | HTML, CSS e JavaScript


O código abaixo renderiza na parte inferior da tela do dispositivo um box que será carregado automaticamente para todos os novos usuários até que eles cliquem em "Ok, obrigado". Edite o código conforme a necessidade.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="autor" content="devPlayApp Blog">
    <title>Box para Cookies de site</title>
    <style>

        *{
        margin:0;
        padding: 0;
        text-align:center;
        }

        div#boxCookies{
        display:none;
        width:90vw;
        background-color:rgba(29,30,31,.95);
        opacity:1;
        padding: 10px 5vw;
        font-weight:500;
        font-family:arial;
        color:white;
        font-size:0.9em;
        position:fixed;
        bottom:0;
        }

        div#boxCookies #OK{
        padding: 10px 20px;
        color:#4f8df9;
        cursor:pointer;
        }

        div#boxCookies a:visited{
        color:white;
        }

    </style>

</head>
<body>
    <h1>Template - Box de cookies</h1>
    <div id="boxCookies">

    <p>
        Este site utiliza cookies. Os cookies ajudam a lembrar de suas
        preferências, para que possamos oferecer uma experiência
        online personalizada.
        <!-- No atributo href da tag a abaixo insira o lik da página que contém informações sobre os cookies -->
        <a href="">Saiba mais</a>
    </p>
    <p id="OK" onclick="closedBox()">
        Ok, obrigado.
    </p>


    </div>
    <script>
        var boxCookies = document.getElementById("boxCookies");

        window.onload = function(){
            if(!(localStorage.getItem("cookie"))){
            console.log("não tem cookie");
            boxCookies.style.display="block"
            }else{
            boxCookies.style.display="none";
            console.log("tem cookie");
            }
        }

        function closedBox(){
            setCookie();
            boxCookies.style.display="none";
        }

        function setCookie(){
            var dateToday = new Date();
            var dateExpire = new Date();
            dateExpire.setDate(dateToday.getDate()+365)//Troque 365 pelos nº de dias que deseja.
            document.cookie = 'user-cookies-consent=yes;expires='+dateExpire+"'"
            localStorage.setItem("cookie","yes")
        }

    </script>

   
</body>
</html>

Comentários

Postar um comentário