cookie_notice_js

by luizpaulo165

HTML

<div id="cookie_message">
  <span><b>Nome da empresa e os cookies</b>: Utilizamos cookies para personalizar anúncios e melhorar a sua experiência no site. Para saber mais, acesse a nossa <a href="#" target="_blank">Política de Privacidade</a>.</span>
  <button id="close-cookie">Aceitar e fechar</button>
</div>

CSS

#cookie_message{
  font-family: 'Conv_segoeuil','Arial' !important;
  background-color:#fff;
  max-width:1440px;
  width:calc(100% - 2rem);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,0.1);
  padding:2rem;
  position:fixed;
  bottom:-2rem;
  left:50%;
  transform:translateX(-50%);
  box-sizing:border-box;
  border-radius:10px;
  box-shadow:0 9px 10px rgba(0,0,0,0.2);
  z-index:999;
  visibility:hidden;
  opacity:0;
   transition:0.2s all ease-in-out;
}
#cookie_message.active{
  bottom:1rem;
  visibility:visible;
  opacity:1;
  transition:0.2s all ease-in-out;
}
#cookie_message button{
  font-size:16px;
  color:#f58220;
  background-color:transparent;
  width:160px;
  height:38px;
  border:1px solid #f58220;
  border-radius:6px;
  margin-left:1rem;
  cursor:pointer;
}
#cookie_message span{
  flex:1;
  font-size:16px;
  color:#333;
}
#cookie_message span a{
    color:#f58220;
    text-decoration: none;
  }

/* @Media */
@media screen and (max-width: '320px') and (max-width: '667px') {
  #cookie_message{
    text-align:center;
    flex-direction:column!important;
  }
  #cookie_message span{
    margin-bottom:1rem;
  }
}

JavaScript

var keyCookie = localStorage.getItem('aceptCookie');
console.log(keyCookie)

if(keyCookie == 'false' || keyCookie == null) {
	$('#cookie_message').addClass('active');
} else {
	$('#cookie_message').removeClass('active');
}

$('#close-cookie').click(function(){
	localStorage.setItem('aceptCookie', 'true');
  $('#cookie_message').removeClass('active');
})