mostrar y ocultar div con javascript ejemplos
Cuando un usuario cierra un<div>, oculta ese<div> en todas las páginas del sitio (12)
Desarrollé un par de cuadros de alerta que se muestran en todas las páginas del sitio.
El usuario puede cerrar cada caja por separado:
$(document).ready(function() {
$("#close-alert-box-news").click(function() {
$("#alert-box-news").hide(800);
});
$("#close-alert-box-maintenance").click(function() {
$("#alert-box-maintenance").hide(800);
});
});
.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-news">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<article class="alert-box" id="alert-box-maintenance">
<h1>Site Maintenance</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-maintenance">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
jsFiddle
Ahora necesito asegurarme de que el cuadro que cierra el usuario (podría ser uno, podría ser ambos), no vuelve a aparecer cuando navega por el sitio o vuelve a cargar una página.
Estoy pensando que podría configurar una cookie PHP para que caduque en 24 horas. Pero la mayoría de las publicaciones relacionadas en este sitio recomiendan una cookie de JavaScript. Lamentablemente, mis esfuerzos por implementar una solución de JavaScript no han funcionado (las cajas vuelven a aparecer después de cerrarse). He intentado varios métodos, como se describe aquí:
- Establecer cookie para ocultar div cuando se hace clic en el botón
- Establecer cookies cuando mi div está oculto
- jQuery Cookie ocultar / mostrar div
- Ocultar div cookie 24hr javascript?
¿Cuál sería un método simple para ocultar cada cuadro, en todo el sitio, durante 24 horas?
Estoy abierto a jQuery, JavaScript, PHP, cookies, sesiones o algo más.
no funcionará en . puedes probar en el enlace de demostración
$(document).ready(function() {
checkCookie("alertDisplayed")
$("#close-alert-box-news").click(function() {
setCookie("alertDisplayed", ''yes'', 1);
$(".alert-box").hide(800);
});
$("#close-alert-box-maintenance").click(function() {
setCookie("alertDisplayed", ''yes'', 1);
$(".alert-box").hide(800);
});
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function checkCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split('';'');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == '' '') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
$(".alert-box").hide();
}
}
return;
}
.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-news">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<article class="alert-box" id="alert-box-maintenance">
<h1>Site Maintenance</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-maintenance">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
Es posible que con sessionStorage de javascript.
Por ejemplo :
Almacena la fecha actual ( var currentDate ) y la fecha después de un minuto ( var afterOneMinute ) en sessionStorage. Cada clic en un botón o página de recarga, cambia la fecha actual y los compara con la variable afterOneMinute y luego ocultar o mostrar el cuadro
archivo html
<head>
<script src="jquery.js"></script>
</head>
<body>
<button onclick="hideOneMinute()">Hide box while 1 minute </button>
<div id="box" style="border: 1px solid red; display: inherit">
<h2>Box</h2>
hello
</div>
<div id="messageBox"></div>
</body>
JS
<script>
var currentDate, afterOneMinute;
function addDate(){
var current = new Date();
// Converts current date in seconds
currentDate = current.getHours()*3600+current.getMinutes()*60+current.getSeconds();
// Current date + 1 minute
afterOneMinute = currentDate + 1*60;
}
addDate();
console.log(currentDate);
// verify sessionStorage when page is reloaded ;
if(typeof(Storage) !== "undefined") {
if(sessionStorage.currentDate){
addDate();
sessionStorage.currentDate = currentDate;
if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
{
$(''#box'').hide();
console.log(''hide'');
}
else{
sessionStorage.clear();
console.log(''show'');
$(''#box'').show();
}
}
}
function hideOneMinute() {
if(typeof(Storage) !== "undefined") {
if(sessionStorage.currentDate){
addDate();
sessionStorage.currentDate = currentDate;
if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
{
$(''#box'').hide();
}
else{
sessionStorage.clear();
console.log(''show'');
$(''#box'').show();
}
}else{
addDate();
sessionStorage.currentDate = currentDate;
sessionStorage.afterOneMinute = afterOneMinute;
console.log(''hide'');
$(''#box'').hide();
}
document.getElementById("messageBox").innerHTML = "Box will be shown at " + sessionStorage.afterOneMinute;
} else {
document.getElementById("messageBox").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
Las cookies y el almacenamiento local tienen diferentes propósitos. Las cookies son principalmente para leer en el lado del servidor, el almacenamiento local solo se puede leer en el lado del cliente.
En su caso, está desperdiciando ancho de banda al enviar todos los datos en cada encabezado HTTP. Por lo tanto, le recomiendo que use el almacenamiento local HTML en lugar de las cookies.
Según la diferencia técnica y también mi comprensión:
- Además de ser una forma antigua de guardar datos, las cookies le otorgan un límite de 4096 bytes, es por cookie. El almacenamiento local es tan grande como 5 MB por dominio
- localStorage es una implementación de la interfaz de almacenamiento. Almacena datos sin fecha de vencimiento y solo se borran mediante JavaScript, o borrando la memoria caché del navegador / datos almacenados localmente, a diferencia de la caducidad de cookies.
https://jsfiddle.net/eath6oyy/33/
$(document).ready(function() {
var currentTime = new Date().getTime();
var timeAfter24 = currentTime + 24*60*60*1000;
$("#close-alert-box-news").click(function() {
$("#alert-box-news").hide(800);
//Set desired time till you want to hide that div
localStorage.setItem(''desiredTime'', timeAfter24);
});
if(localStorage.getItem(''desiredTime'') >= currentTime)
{
$(''#alert-box-news'').hide();
}else{
$(''#alert-box-news'').show();
}
$("#close-alert-box-maintenance").click(function() {
$("#alert-box-maintenance").hide(800);
//Set desired time till you want to hide that div
localStorage.setItem(''desiredTime1'', timeAfter24);
});
if(localStorage.getItem(''desiredTime1'') >= currentTime)
{
$(''#alert-box-maintenance'').hide();
}else{
$(''#alert-box-maintenance'').show();
}
});
.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-news">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<article class="alert-box" id="alert-box-maintenance">
<h1>Site Maintenance</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-maintenance">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
Mi proceso concreto y lendi Le sugiero que mantenga la base de datos de back-end (como sql, mysql, etc.) para que pueda contener simple user_id, mostrar el cuadro de alerta o no, este tipo de 2 columnas se crean en esa tabla.
1) Si su usuario es usuario registrado, visite su sitio usando la identificación de usuario o los detalles, puede administrar esa casilla de alerta.
2) Si el usuario no está registrado en ese momento, use el ID MAC del visitante.
Mi respuesta es una extensión de la respuesta de @ Loading . El problema de un destello de contenido en la carga de la página, incluso cuando el usuario ha elegido descartar la (s) alerta (s), se debe a que la evaluación de localStorage se realiza después de que se carga el DOM.
Por lo tanto, recomendaría ocultar las alertas por defecto, aunque esto podría ser un problema para los navegadores que no tienen JS habilitado. Sin embargo, esto puede eludirse si usa modernizr.js, que agregará una clase al elemento HTML cuando se detecte JS, y puede modificar los estilos base en consecuencia, por ejemplo:
.alert-box {
display: none;
}
.no-js .alert-box {
display: block;
/* Other styles */
}
Mi solución usa localStorage, y se basa en almacenar opciones como un objeto codificado: las dos claves almacenadas por caja están hidden (para almacenar el estado del cuadro) y la timestamp (para almacenar la hora cuando se descarta el recuadro). Estos pueden usarse para evaluar si (1) el usuario ha elegido descartar la alerta y (2) la acción se realizó dentro de las 24 horas.
Algunas modificaciones que he hecho a tu código:
- Use la selección dependiente del contexto, para que no tenga que declarar múltiples manejadores de eventos de clic similares para todos los cuadros de alerta. Esto hace que el código sea más simple y menos redundante.
- Use https para la URL de la imagen para que no se entrometa con el HTTPS de JSfiddle :)
El código de trabajo se muestra de la siguiente manera, pero localStorage no funciona aquí debido a restricciones de seguridad: para una demostración funcional, consulte el JSfiddle actualizado en su lugar .
$(function() {
// Check for localStorage
if (typeof window.localStorage !== typeof undefined) {
// Loop through all alert boxes
$(''.alert-box'').each(function() {
var $t = $(this),
key = $t.attr(''id'');
// If key exists and it has not expired
if (window.localStorage.getItem(key)) {
var json = JSON.parse(window.localStorage.getItem(key));
if (json.hide && json.timestamp < Date.now() + 1000 * 60 * 60 * 24) {
$t.hide();
} else {
$t.show();
}
} else {
$t.show();
}
});
}
// Bind click events to alert boxes
$(''.alert-box a.alert-box-close'').click(function() {
var $alertBox = $(this).closest(''.alert-box'');
// Hide box
$alertBox.hide(800);
// Store option in localStorage, using the box''s ID as key
if (typeof window.localStorage !== typeof undefined) {
window.localStorage.setItem($alertBox.attr(''id''), JSON.stringify({
hide: true,
timestamp: Date.now()
}));
}
});
// For demo purposes only, clear localStorage to ease testing
$(''#clear-localstorage'').click(function() {
window.localStorage.clear();
});
});
.alert-box {
display: none;
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-news">
<img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<article class="alert-box" id="alert-box-maintenance">
<h1>Site Maintenance</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-maintenance">
<img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<button id="clear-localstorage">Clear local storage (for testing)</button>
Por lo que entiendo su pregunta, ocultar las alertas por 24 horas (y luego mostrarlas todas nuevamente después de un día) será una mala experiencia para el usuario.
Supongo que estás cargando estas alertas desde algún tipo de base de datos. Si es así, la respuesta correcta sería almacenar un estado allí. Ya sea una columna de status o una deleted_at tiempo deleted_at , las implementaciones son infinitas.
De cualquier manera, almacenaría el estado de alerta en la base de datos y filtraré sus datos cuando lo haga en consecuencia.
Por lo tanto, en su opinión, usted tendría (suponiendo que php aquí):
<?php
<?php if(!empty($newlyFilteredAlerts)): ?>
<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<?php foreach(newlyFilteredAlerts as $alert): ?>
<p><?= $alert ?></p>
<?php endforeach;?
<a class="alert-box-close" id="close-alert-box-news">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="" >
</a>
</article>
<?php endif; ?>
Entonces, en consecuencia, desea agregar algún tipo de punto final para alterar el estado de la base de datos:
$(document).ready(function() {
$("#close-alert-box-news").click(function() {
$.post({
url: ''/alerts'',
type: ''DELETE'',
success: function () {
$("#alert-box-news").hide(800);
},
});
});
});
NOTA: Esta respuesta está destinada a apuntarle en la dirección correcta, no a escribir su código 😩. Todo el código anterior no se ha probado por completo, por lo que si simplemente lo copia y pega, puede que no funcione .
Pruebe esta solución jsfiddle y lea los comentarios sobre la ruta de almacenamiento. Si está trabajando en un sub domain , debe especificar el dominio en la cookie escrito como en los comentarios de setCookie() . si está working on localhost entonces el dominio de la cookie debe establecerse en "" o NULL o FALSE en lugar de "localhost". Para referencia de dominio, puede estudiar esta pregunta sobre stackflow
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
// document.cookie = cname + "=" + cvalue + ";" + expires + ";domain=.example.com;path=/"; if you are trying in any sub-domain
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split('';'');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)=='' '') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
$(document).ready(function() {
if(getCookie(''news'')==1) { //check if cookie news exist if exist then hide.
$("#alert-box-news").hide();
}
if(getCookie(''maintenance'')==1) { //check if cookie maintenance exist if exist then hide.
$("#alert-box-maintenance").hide();
}
$("#close-alert-box-news").click(function() {
setCookie(''news'',1,1); // set cookie news to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
$("#alert-box-news").hide(800);
});
$("#close-alert-box-maintenance").click(function() {
setCookie(''maintenance'',1,1); // set cookie maintenance to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
$("#alert-box-maintenance").hide(800);
});
});
Puede ir con el código que tiene más la configuración de una cookie que caduca en 24 horas:
Instalar el Marco de Cookie JavaScript de MDN
En su js establezca una variable de
tomorrowcon la fecha de vencimiento de su cookie:var today = new Date(); var tomorrow = today.setHours(today.getHours() + 24);Establezca sus cookies de la siguiente manera:
docCookies.setItem(''hide_news'', ''true'', tomorrow);Ocultar condicionalmente los cuadros en función del valor de la cookie
if (docCookies.getItem(''hide_news'') == ''true''){ $("#alert-box-news").add_class(''hidden''); };Defina la clase
hiddenen su archivo CSS.hidden { display none; }
Puede verlo todo en acción en este códec .
Siguiendo en @Loading .. respuesta:
los cuadros de alerta siempre reaparecen brevemente en la recarga antes de desaparecer. ¿Algunas ideas?
¿Por qué es esto?
Las funciones dentro de $(document).ready() se ejecutarán hasta que se cargue el DOM completo. Es por eso que se emiten las alertas, y tan pronto como se ejecuta la función, las oculta.
Solución:
Inicialmente puede ocultar sus alertas con una clase solo para aprovechar que el navegador no procesará el contenido hasta que se haya creado el CSSOM.
La clase que estamos usando es simplemente configurar la display: none; propiedades display: none; .
.hidden {
display: none;
}
Esto causará, por supuesto, redibujar en el navegador. (ver notas)
Tu lógica ya está mostrando la alerta con
if (localStorage.getItem(''desiredTime'') >= currentTime) {
$(''#alert-box-news'').hide();
} else {
$(''#alert-box-news'').show();
}
Porque el uso de .show() agregará una display: block; estilo en línea display: block; tendrá una especificidad más alta que la clase .hidden , mostrando la alerta.
Notas:
- Usando la
display: none;empujará el contenido debajo de la alerta hacia arriba o hacia abajo. Puede usar otros métodos si lo desea, comovisibility: hidden;otransformque no está dentro del alcance de esta respuesta.
EDITAR:
A continuación, se presenta una ilustración siguiendo los siguientes pasos:
- El contador de demostración aumentó a 20 segundos para la prueba.
- Hacemos clic para cerrar la alerta y activar la función
localStorage, configurando la tecladesiredTime. - Después de configurar la clave, actualizamos el navegador y presionamos ejecutar varias veces para ver si la clave está funcionando.
Finalmente, solo para verificar que la clave se está configurando, vamos a:
DevTools (F12) -> Pestaña Aplicación -> Almacenamiento local -> shell jsFiddle.
Ejecutar es golpeado una vez más, después de que la cuenta atrás haya terminado, mostrando la alerta nuevamente.
Ilustración:
Es posible que necesitemos más detalles para resolver el problema con este enfoque si no está funcionando en vivo.
Simplemente debes usar el almacenamiento local.
HTML
<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-news">
<img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<article class="alert-box" id="alert-box-maintenance">
<h1>Site Maintenance</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-maintenance">
<img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
Javascipt
$(document).ready(function() {
var nd = new Date();
var md = nd;
var newsclicked = false;
var maintenanceclicked = false;
setInterval(function() {
newsclicked = (localStorage.getItem("newsclicked")) ? new Date(localStorage.getItem("newsclicked")) : false;
maintenanceclicked = (localStorage.getItem("maintenanceclicked")) ? new Date(localStorage.getItem("maintenanceclicked")) : false;
if (maintenanceclicked === false) {
console.log(maintenanceclicked);
$("#alert-box-maintenance").show(800);
} else {
var mddiff = (md.getTime() - maintenanceclicked.getTime()) / (60 * 60 * 24 * 1000);
if (mddiff >= 1) {
$("#alert-box-maintenance").show(800);
} else {
$("#alert-box-maintenance").hide(800);
}
}
if (newsclicked === false) {
$("#alert-box-news").show(800);
} else {
var nddiff = (nd.getTime() - newsclicked.getTime()) / (60 * 60 * 24 * 1000);
if (nddiff >= 1) {
$("#alert-box-news").show(800);
} else {
$("#alert-box-news").hide(800);
}
}
}, 200);
$("#close-alert-box-news").on("click", function() {
nd = new Date();
localStorage.setItem("newsclicked", nd);
$("#alert-box-news").hide(800);
});
$("#close-alert-box-maintenance").on("click", function() {
md = new Date();
localStorage.setItem("maintenanceclicked", md);
$("#alert-box-maintenance").hide(800);
});
});
CSS
.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
#alert-box-news,#alert-box-maintenance{
display:none; // by default have both elements hidden.
}
Aquí hay una update en tu violín para probarlo en acción. Actualiza la página una vez que hayas cerrado un div
Use localStorage() .
El almacenamiento local es por origen (por dominio y protocolo)
- Al hacer clic en Cerrar DIV, puede obtener la marca de tiempo actual
- Agregue el número de horas (24) a esa marca de tiempo
- Almacene ese valor en
localStoragecomolocalStorage.setItem(''desiredTime'', time) - Compruebe el sello de tiempo actual con ese sello de tiempo almacenado
localStorage.getItem(''desiredTime''), basado en eseshow/hide
jQuery
$(document).ready(function(){
//Get current time
var currentTime = new Date().getTime();
//Add hours function
Date.prototype.addHours = function(h) {
this.setTime(this.getTime() + (h*60*60*1000));
return this;
}
//Get time after 24 hours
var after24 = new Date().addHours(10).getTime();
//Hide div click
$(''.hide24'').click(function(){
//Hide div
$(this).hide();
//Set desired time till you want to hide that div
localStorage.setItem(''desiredTime'', after24);
});
//If desired time >= currentTime, based on that HIDE / SHOW
if(localStorage.getItem(''desiredTime'') >= currentTime)
{
$(''.hide24'').hide();
}
else
{
$(''.hide24'').show();
}
});
HTML
<div>DIV-1</div>
<div class=''hide24''>DIV-2</div>
Cosas para notar
- También puedes usar
$.cookie, pero ese es un enfoque más antiguo ahora. -
<div>con clasehide24estará oculto. - Asegúrese de poner este código en general JavaScript, que se carga en cada solicitud HTTP de su sitio web.
- Para
localStorage, debe tener navegadores HTML5.
Espero que esto ayude.
Actualizó el script con un control de 24 horas
Cómo y dónde almacena la marca de tiempo tiene más que ver con qué control desea tener en ella.
Como hay un usuario involucrado, me gustaría ir al servidor y crear, por ejemplo, un campo adicional en la tabla de la base de datos de usuarios, donde se guardan estos estados.
De esta forma, a diferencia del usuario que puede borrar cookies / almacenamiento, usted controla qué alertas deben permanecer ocultas y por cuánto tiempo.
Una segunda ventaja sería que esto puede ser, por encima de tiempo, basado en rollo, donde se pueden tomar ciertas medidas basadas en los usuarios y sus credenciales.
De cualquier manera yo construiría el show / hide así, donde almacena una clase, o un atributo, es decir, la etiqueta html, que controla si un cuadro será visual o no.
La ventaja de esto es que se deshace del problema de "primer espectáculo y luego se esconde" y funcionará ya sea que lo agregue al lado del servidor o use un script.
Aquí hay una muestra simple que usa script, JavaScript simple, y de ninguna manera está optimizado, simplemente por la lógica que quería mostrar.
Como esto no se ejecutará realmente como un fragmento de Stack debido a algún problema de seguridad, aquí hay un violín que sí lo hace: https://jsfiddle.net/essjuj4y/10/
Al hacer clic en For this demo - to clear local storage botón de For this demo - to clear local storage , se borrará el almacenamiento y cuando se vuelva a ejecutar la página, aparecerán los cuadros.
/* add an event handler to be able to close a box */
var alerts = document.querySelectorAll(''.alert-box-close'');
for (var i = 0; i < alerts.length; i++) {
alerts[i].addEventListener(''click'', function(e) {
var boxtype = e.target.parentElement.id.split(''-'').pop();
document.getElementById(''alert-box-'' + boxtype).style.display = "none";
localStorage.setItem("al-" + boxtype, new Date());
})
}
/* add an event handler to be able to clear storage - for demo purpose */
document.querySelector(''button'').addEventListener(''click'', function(e) {
localStorage.clear();
})
.alert-box {
display: none;
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
.al-news #alert-box-news,
.al-maintenance #alert-box-maintenance {
display: block;
}
<html>
<head>
<script type=''text/javascript''>
function has24HourPassed(key) {
var storeval = localStorage.getItem(key);
if (!storeval) return true; /* nothing stored in storage */
var T24_HOUR = 24 * 60 * 60 * 1000;
if ((new Date - new Date(storeval)) < T24_HOUR) return false;
localStorage.removeItem(key); /* 24 hours passed so we can remove stored date */
return true;
}
(function(d) {
if (has24HourPassed(''al-news'')) {
d.classList.add(''al-news'');
}
if (has24HourPassed(''al-maintenance'')) {
d.classList.add(''al-maintenance'');
}
})(document.documentElement);
</script>
</head>
<body>
<article class="alert-box" id="alert-box-news">
<h1>News Alerts</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-news">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<article class="alert-box" id="alert-box-maintenance">
<h1>Site Maintenance</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-maintenance">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<button>For this demo - to clear local storage</button>
</body>
</html>