Lorsqu'un utilisateur ferme un <div>, cachez que <div> sur toutes les pages du site

Utilisez localStorage() .

Le stockage local est par origine (par domaine et protocole)

• Sur le clic de DIV close, vous pouvez obtenir l'horodatage actuel
• Ajouter un nombre d'heures (24) à ce timbre-poste
• Enregistrez cette valeur dans localStorage comme localStorage.setItem('desiredTime', time)
• Vérifiez l'horodatage actuel avec le timbre-poste enregistré localStorage.getItem('desiredTime') , en fonction de ce show/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> 

Des choses à noter

• Vous pouvez également utiliser $.cookie , mais c'est une approche plus ancienne maintenant.
• <div> avec classe hide24 sera caché uniquement.
• Assurez-vous de mettre ce code en version JavaScript en général, qui se charge de chaque demande HTTP de votre site.
• Pour localStorage , vous devriez avoir des navigateurs HTML5.

Web Storage HTML5

J'espère que cela t'aides.

Suivre @Loading … répondre:

Les boîtes d'alerte toujours re-apparaissent brièvement sur le rechargement avant de disparaître. Des idées?

Pourquoi est-ce?

Les fonctions à l'intérieur de $(document).ready() seront exécutées jusqu'à ce que le DOM entier soit chargé. C'est pourquoi les alertes sont rendues, puis, dès que la fonction s'exécute, elle les cache.

Solution:

Vous pouvez d'abord cacher vos alertes avec une classe simplement pour profiter du fait que le navigateur ne rendra pas le contenu tant que le CSSOM n'a pas été créé.

La classe que nous utilisons consiste à définir l' display: none; la propriété display: none; .

 .hidden { display: none; } 

Cela entraînera bien sûr le redessinement dans le navigateur. (voir les notes)

Votre logique affiche déjà l'alerte avec

  if (localStorage.getItem('desiredTime') >= currentTime) { $('#alert-box-news').hide(); } else { $('#alert-box-news').show(); } 

Parce que l'utilisation de .show() ajoutera un display: block; Il aura une spécificité plus élevée que la classe .hidden , montrant l'alerte.

JsFiddle

Remarques:

• Utilisation de l' display: none; Poussera le contenu sous l'alerte vers le haut ou vers le bas. Vous pouvez utiliser d'autres méthodes si vous le souhaitez, comme la visibility: hidden; Ou transform qui n'est pas dans la portée de cette réponse.
  

  ---

MODIFIER:

Une illustration sera présentée ci-dessous en procédant comme suit:

• Le compteur de démonstration a augmenté à 20 secondes pour les tests.
• Nous cliquons pour supprimer l'alerte et déclencher la fonction localStorage , en définissant la touche desiredTime .
• Une fois la clé réglée, nous actualisons le navigateur et frappons plusieurs fois pour voir si la clé fonctionne.

• Enfin, pour vérifier que la clé est en train d'être réglée, nous allons à:

  DevTools (F12) -> Onglet Application -> Local Storage -> shell jsFiddle.

• La course est frappée une fois de plus, une fois le compte à rebours terminé, en montrant l'alerte à nouveau.

Illustration:

Nous pourrions avoir besoin de plus de détails pour résoudre le problème avec cette approche si cela ne fonctionne pas en direct.

Dans la mesure où je comprends votre question, cacher les alertes pendant 24 heures (et ensuite les afficher à nouveau après une journée) sera une mauvaise expérience utilisateur.

Je suppose que vous chargez ces alertes d'une sorte de base de données. Dans l'affirmative, la bonne réponse serait de stocker un statut là-bas. Qu'il s'agisse d'une colonne d' status ou d'un timestamp deleted_at , les implémentations sont infinies.

Quoi qu'il en soit, je stocke l'état d'alerte dans la base de données et filtrez vos données lorsque vous tirez en conséquence.

Ainsi, à votre avis, vous auriez (en supposant que php ici):

 <?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; ?> 

Ensuite, vous souhaitez ajouter une sorte de point d'extrémité pour modifier l'état de cette base de données:

 $(document).ready(function() { $("#close-alert-box-news").click(function() { $.post({ url: '/alerts', type: 'DELETE', success: function () { $("#alert-box-news").hide(800); }, }); }); }); 

REMARQUE: Cette réponse est destinée à vous indiquer dans la bonne direction, pas à écrire votre code 😩. Tout le code ci-dessus est complètement non testé, donc si vous copiez et collez simplement, cela pourrait ne pas fonctionner .

Essayez cette solution jsfiddle et lisez les commentaires concernant le chemin de stockage. Si vous travaillez sur le sub domain vous devez spécifier un domaine dans un cookie écrit comme dans les setCookie() de setCookie() . Si vous working on localhost alors le domaine cookie doit être défini sur "" ou NULL ou FALSE au lieu de "localhost". Pour la référence de domaine, vous pouvez étudier cette question de stackoverflow

 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); }); }); 

Il ne fonctionnera pas dans stackoverflow. Vous pouvez tester dans le lien de démonstration

Démonstration

 $(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> 

Les cookies et le stockage local servent à des fins différentes. Les cookies sont principalement destinés à la lecture sur le serveur, le stockage local ne peut être lu que par le client.

Dans votre cas, vous gaspillez la bande passante en envoyant toutes les données dans chaque en-tête HTTP. Je vous recommande donc d'utiliser le stockage local HTML au lieu du cookie.

Selon la différence technique et aussi ma compréhension:

• En plus d'être une ancienne façon de sauvegarder des données, Cookies vous donne une limite de 4096 octets – c'est par cookie. Le stockage local est aussi grand que 5 Mo par domaine
• LocalStorage est une implémentation de l'interface de stockage. Il stocke les données sans date d'expiration et n'est effacé que par JavaScript, ou efface le cache du navigateur / les données localement stockées – contrairement à l'expiration des 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> 

Ma réponse est une extension de la réponse @ Loading . La question d'un flash de contenu sur la charge de page, même lorsque l'utilisateur a choisi de rejeter l'alerte (s), est due à l'évaluation pour localStorage fait après le chargement du DOM.

Par conséquent, je recommanderais de cacher les alertes par défaut, même si cela pourrait être un problème pour les navigateurs sans JS activé. Cela peut cependant être contourné si vous utilisez modernizr.js qui ajoutera une classe à l'élément HTML lorsque JS sera détecté et que vous pouvez modifier les styles de base en conséquence, par exemple:

 .alert-box { display: none; } .no-js .alert-box { display: block; /* Other styles */ } 

Ma solution utilise localStorage et repose sur le stockage des options en tant qu'objet stringé: les deux clés stockées par boîte sont hidden (pour stocker l'état de la boîte) et l' timestamp (pour stocker l'heure lorsque la boîte est rejetée). Ceux-ci peuvent être utilisés pour évaluer si (1) l'utilisateur a choisi de rejeter l'alerte et (2) l'action a été effectuée dans les 24 heures.

Certaines modifications que j'ai apportées à votre code:

1. Utilisez une sélection dépendante du contexte, de sorte que vous ne devez pas déclarer plusieurs gestionnaires d'événements de clic similaires pour toutes les boîtes d'alerte. Cela rend le code plus simple et moins redondant.
2. Utilisez https pour l'URL de l'image afin qu'elle ne gâte pas avec HTTPS de JSfiddle 🙂

Le code de fonctionnement est affiché comme suit, mais localStorage ne fonctionne pas ici en raison de restrictions de sécurité: pour une démonstration fonctionnelle, reportez – vous à JSfiddle mis à jour .

 $(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> 

Vous devriez simplement utiliser le stockage 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="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> 

Javascipt

  $(document).ready(function() { var nd = new Date(); // initial values for date variables var md = nd; // check if localStorage item regarding news element exists if(!localStorage.getItem("newsclicked")) { $("#alert-box-news").show(800); } else { var oldnd = new Date(localStorage.getItem("newsclicked")); // retrieve the time that the element was hidden and calculate difference from date and time now. if comparison result is bigger than 1 day then show news box. var nddiff = (nd.getTime()-oldnd.getTime())/(60*60*24*1000); if(nddiff>=1){ $("#alert-box-news").show(800); } } // check if localStorage item regarding maintenance element exists if(!localStorage.getItem("maintenanceclicked")) { $("#alert-box-maintenance").show(800); } else { var oldmd = new Date(localStorage.getItem("maintenanceclicked")); // retrieve the time that the element was hidden and calculate difference from date and time now. if comparison result is bigger than 1 day then show maintenance box. var mddiff = (md.getTime()-oldmd.getTime())/(60*60*24*1000); if(mddiff>=1){ $("#alert-box-maintenance").show(800); } } $("#close-alert-box-news").click(function() { $("#alert-box-news").hide(800); nd = new Date(); // get the current date and time that close-alert-box-news was clicked and store it to localStorage localStorage.setItem("newsclicked",nd); }); $("#close-alert-box-maintenance").click(function() { $("#alert-box-maintenance").hide(800); md = new Date(); // get the current date and time that close-alert-box-maintenance was clicked and store it to localStorage localStorage.setItem("maintenanceclicked",md); }); }); 

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. } 

Voici une mise à jour dans votre violon pour le tester en action. Actualisez la page une fois que vous avez fermé une div

Vous pouvez utiliser le code que vous avez plus en définissant un cookie qui expire dans 24 heures:

1. Installer le cadre de cookie JavaScript MDN

2. Sur votre js, définissez une variable de tomorrow tenant la date d'expiration de votre cookie:

    var today = new Date(); var tomorrow = today.setHours(today.getHours() + 24); 

3. Configurez vos cookies comme suit:

    docCookies.setItem('hide_news', 'true', tomorrow); 

4. Masquer concrètement les cases en fonction de la valeur du cookie

    if (docCookies.getItem('hide_news') == 'true'){ $("#alert-box-news").add_class('hidden'); }; 

5. Définissez la classe hidden sur votre fichier CSS

    .hidden { display none; } 

Vous pouvez le voir en action dans ce code .

Il est possible avec sessionStorage de javascript.

Par exemple :

var currentDate date actuelle ( var currentDate ) et la date après une minute ( var afterOneMinute ) dans sessionStorage. Chaque clic sur un bouton ou une page de rechargement, modifiez la date actuelle et comparez-les avec la variable afterOneMinute et après cacher ou afficher la case

Fichier 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> 

Mise à jour du script avec un contrôle de 24 heures

Comment et où vous enregistrez l'horodatage a plus à voir avec quel contrôle vous voulez y avoir.

Étant donné qu'il y a un utilisateur impliqué, je parviens sur le côté du serveur, et je créerais un champ supplémentaire dans la table de la base de données des utilisateurs, où ces états sont conservés.

De cette façon, en face de l'utilisateur pouvant effacer les cookies / stockage, vous contrôlez quelles alertes devraient rester cachées et pendant combien de temps.

Un deuxième avantage serait que cela peut être, sur le temps, roulé en fonction, où certaines actions peuvent être prises en fonction des utilisateurs et de leurs informations d'identification.

Quoi qu'il en soit, je construisais le show / hide comme ça, où tu stockes une classe ou un attribut, c'est-à-dire la balise html, qui contrôle si une boîte sera visuelle ou non.

L'avantage de cela est que vous vous débarrassez du problème du "premier spectacle puis de la masquage" et cela fonctionnera soit vous l'ajouterez à côté du serveur, soit vous utiliserez un script.

Voici un exemple simple à l'aide du script, javascript simple, et il n'est pas optimisé, c'est simplement pour la logique que je voulais montrer.

Étant donné que cela ne fonctionnera pas correctement comme un extrait de pile en raison d'un problème de sécurité, voici une violon qui: https://jsfiddle.net/essjuj4y/10/

En cliquant sur la touche For this demo - to clear local storage bouton de For this demo - to clear local storage , le stockage sera effacé et lorsque la page sera exécutée à nouveau, les cases apparaîtront.

 /* 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> 

Mon processus concret et prêti, je vous suggère de maintenir une base de données back-end (comme sql, mysql, etc.) pour cela peut contenir simple user_id, affichage de boîte d'alerte ou pas ce type de 2 colonnes sont créées dans cette table.

1) Si votre utilisateur est enregistré, les utilisateurs sont utilisés, visitez votre site en utilisant l'identifiant ou le détail de l'utilisateur, vous pouvez gérer cette zone d'alerte.

2) Si l'utilisateur n'est pas enregistré, utilisez-vous l'identifiant MAC du visiteur.