notificação de cookies
Compartilhar:

Hoje, quase todos os sites usam cookies para coletar vários tipos de informações. Se o seu site usa cookies, os visitantes devem estar cientes da política de cookies. Nesse caso, um pop-up de notificação de cookies pode ser exibido para solicitar ao visitante que aceite o cookie. Desta forma, o usuário será informado sobre o uso de cookies do site e aceitará a política de cookies.

🚨DICA: Crie um projeto de programação web com HTML5CSS3 JavaScript do zero em 3 aulas: MiniCurso Gratuito! 🚀

fullstack javascript onebitcode

Os pop-ups de consentimento de cookies são úteis para tornar os sites compatíveis com GDPR. Os avisos de consentimento de cookies podem ser exibidos em uma caixa pop-up para facilitar o uso. Existem vários plugins JavaScript ou jQuery que podem ser usados ​​para adicionar pop-ups de notificação de cookies em sites. Mas você não precisa usar nenhum plug-in de terceiros para exibir o pop-up de consentimento do cookie. Uma caixa de diálogo de consentimento de cookies pode ser facilmente criada/exibida usando JavaScript, CSS e HTML. Este tutorial mostrará como criar/exibir/adicionar um pop-up de consentimento de cookies em um site usando a linguagem JavaScript.

Banner Amazon Notebook 300x300

HTML e Javascript

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notificação de Cookies</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Meu titulo do site</h2>
    <div id="cookie-notification" class="CookieMessage" style="display: none;">
        <div class="CookieMessage-content"> 
          <p>Este site utiliza cookies de navegação para a melhor experiência do usuário. <a href="https://exemplo/politicas-de-privacidade">Saiba mais</a></p>
          <p><a id="cookie-notification-close" class="CookieMessage-button" href="#">Aceitar</a></p>          
        </div>
      </div>
    <script>
        if (!localStorage.getItem("cookiesAccepted")) { 
        var cookieMessage = document.getElementById('cookie-notification');  
        var closeCookie = document.getElementById('cookie-notification-close');
        
        cookieMessage.style.display = 'block';  
        closeCookie.addEventListener("click", function(e) {  
          e.preventDefault();
          localStorage.setItem("cookiesAccepted", true);
          
          cookieMessage.style.display = 'none';
        });
      }
      
    </script>
</body>
</html>

CSS

.CookieMessage {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #121212;
    z-index: 999;
    display: none;
  }
  
  .CookieMessage-content {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    font-family: sans-serif;
    line-height: 1.5;
    font-size: 12px;

  }

  .CookieMessage-content a{
    color: white;
  }

  .CookieMessage-content p{
    margin: 0 0 20px 0;
  }
  
  .CookieMessage-button {
    background: #00C2FF;
    display: inline-block;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 5px;
    text-transform: uppercase;
  
  }

  .CookieMessage-button:hover{
    background: #5cd9ff;
  }

Conclusão notificação de cookies

Artigo simples, objetivo e direto ao ponto, espero que tenham gostado! Compartilhem.

Banner Amazon Livros de Programação 300x300

Leia mais: Hackers invadiram sistemas de desenvolvedores do LastPass para roubar código-fonte

Banner Amazon Celular 300x300

Postagens Semelhantes