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 HTML5, CSS3 e JavaScript do zero em 3 aulas: MiniCurso Gratuito! 🚀
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.
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.
Leia mais: Hackers invadiram sistemas de desenvolvedores do LastPass para roubar código-fonte
