Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, boa tarde. Estou fazendo uma barra de alerta de cookies. Não estou conseguindo colocar o botão de fechar no canto superior direito. Alguém, pode me dar uma luz? Segue código.
<script>
function cookies(functions) {
const container = document.querySelector('.cookies-container');
const save = document.querySelector('.cookies-save');
if (!container || !save) return null;
const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
if (localPref) activateFunctions(localPref);
function getFormPref() {
return [...document.querySelectorAll('[data-function]')]
.filter((el) => el.checked)
.map((el) => el.getAttribute('data-function'));
}
function activateFunctions(pref) {
pref.forEach((f) => functions[f]());
container.style.display = 'none';
window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
}
function handleSave() {
const pref = getFormPref();
activateFunctions(pref);
}
save.addEventListener('click', handleSave);
}
function marketing() {
console.log('Função de marketing');
}
function analytics() {
console.log('Função de analytics');
}
cookies({
marketing,
analytics,
});
</script>
<style>
p {
margin: 0px;
}
body {
margin: 0px;
height: 200vh;
background: #eee;
}
.cookies-container {
color: #222;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
position: fixed;
width: 100%;
bottom: 2rem;
z-index: 1000;
}
.cookies-content {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background: white;
max-width: 720px;
border-radius: 5px;
padding: 1rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
opacity: 0;
transform: translateY(1rem);
animation: slideUp 0.5s forwards;
}
@keyframes slideUp {
to {
transform: initial;
opacity: initial;
}
}
.cookies-pref label {
margin-right: 1rem;
margin-top: -10px;
}
.cookies-save {
grid-column: 2;
grid-row: 1/3;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #007cf8;
color: white;
cursor: pointer;
border: none;
border-radius: 5px;
padding: 0.8rem 1rem;
font-size: 1rem;
}
@media (max-width: 500px) {
.cookies-content {
grid-template-columns: 1fr;
}
.cookies-save {
grid-column: 1;
grid-row: 3;
}
}
</style>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookies</title>
</head>
<body>
<!--
<div class="cookies-container">
<div class="cookies-content">
<p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> <a href="<?php echo asset('..\cookies')?>" target="_blank"><font color="blue"><b>Termos LGPD</b></font></a></p><br>
<p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>
<div class="cookies-pref">
</div>
<button class="cookies-save">Salvar e Continuar</button>
</div>
</div>
-->
<div class="cookies-container">
<div class="cookies-content">
<p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> </p><br>
<p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>
<div class="cookies-pref">
<button class="cookies-save">OK.Entendi.</button>
<span><a href="">x</a></span>
</div>
<!-- <button class="cookies-save">OK.Entendi.</button>-->
</div>
</body>
</html>Carregando comentários...