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