No soy bueno con Javascript y agradecería cualquier ayuda aquí. Tengo un css escrito que muestra un anuncio cuando la página web se carga con un botón de cierre para ocultar todo el css y su contenido usando Jquery animate.
Me gustaría usar el almacenamiento local para mantenerlo oculto una vez que se hace clic hasta después de un período de tiempo específico, digamos 24 horas, para que cuando el usuario vuelva a cargar la página, no se muestre hasta después del período de tiempo especificado.
mi codigo es
$('.cta-floating_close').click(function() { $('.cta-floating_component').each(function() { $(this).animate({ top: '-200px', }, 500 ); }); }); .cta-floating_component { position: fixed; left: auto; top: 9rem; right: 2rem; z-index: 1000; display: none; max-width: 16rem; padding: 1rem 2rem; border-radius: 1rem; background-image: -webkit-gradient(linear, left top, right top, from(#b671e4), to(#f01486)); background-image: linear-gradient(90deg, #b671e4, #f01486); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; color: #fff; } .cta-floating_close { position: absolute; left: auto; top: -7px; right: 0rem; bottom: auto; font-size: 1.8rem; cursor: pointer; } .cta-floating { position: relative; z-index: 3000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div class="cta-floating"><div class="cta-floating_component" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; opacity: 0.9;"><font color="white">Annoucement appears here!</font><div class="cta-floating_close">X<i class="las la-times-circle"></i></div></div></div>¿Cómo implemento esto? Gracias de antemano
Al close click , puede configurar el tiempo hasta que debe ocultarse en localStorage . En este ejemplo, es básicamente now más 10 segundos (ajusta cómo lo necesites).
Luego setInterval para verificar periódicamente si se ha alcanzado ese tiempo o no.
Lo mismo en $(document).ready en caso de que el espectador haya dejado la página y haya vuelto.
$('.cta-floating_close').click(function() { const now = new Date(); let then = new Date(); then.setTime(now.getTime()+ (10*1000)); //10 seconds localStorage.setItem('showAt', then); setInterval(ShowButton, 1000) $('.cta-floating_component').each(function() { $(this).animate({ top: '-200px', }, 500 ); }); }); $(document).ready(function(){ console.log('ready') ShowButton() setInterval(ShowButton, 1000) }) function ShowButton(){ if(new Date(localStorage.getItem('showAt')) < new Date()){ const element = document.getElementsByClassName('cta-floating_component')[0] element.style.display = 'block'; element.style.top = ''; }else{ document.getElementsByClassName('cta-floating_component')[0].style.display = 'none'; } } .cta-floating_component { position: fixed; left: auto; top: 9rem; right: 2rem; z-index: 1000; display: none; max-width: 16rem; padding: 1rem 2rem; border-radius: 1rem; background-image: -webkit-gradient(linear, left top, right top, from(#b671e4), to(#f01486)); background-image: linear-gradient(90deg, #b671e4, #f01486); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; color: #fff; } .cta-floating_close { position: absolute; left: auto; top: -7px; right: 0rem; bottom: auto; font-size: 1.8rem; cursor: pointer; } .cta-floating { position: relative; z-index: 3000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div class="cta-floating"><div class="cta-floating_component" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; opacity: 0.9;"><font color="white">Annoucement appears here!</font><div class="cta-floating_close">X<i class="las la-times-circle"></i></div></div></div>