Come permettere a popup di continuare a sfogliare anche quando sei passato ad un'altra pagina e si arresta solo quando si fa clic su un button?

Per esempio ho 3 pagine HTML.

Ho un codice popup di javascript che si apre in tutte le 3 pagine each volta che viene caricato. Ho un button di chiusura che quando clicchi, chiude il popup. Tuttavia, il popup verrà caricato di nuovo una volta aperta la pagina o il Page 3.

Il mio output di destinazione è questo: voglio essere in grado di fare il popup, NON popup, each volta che il button di chiusura è cliccato ONCE in qualsiasi pagina.

Penso a questa cosa del cookie, che è, però, un'idea, ma ancora non sono ancora in grado di trovare una soluzione.

Per favore … qualunque assistenza sarebbe stata apprezzata?

Anche se avendo 3 pagine non sarebbe applicabile molto qui, ho ancora creato un jsfiddle solo per scopi di documentazione e rapido riferimento http://jsfiddle.net/philcyb/wmwy04fr/2/

Grazie.

HTML:

<h1>Page 1</h1> <h3>Page 1</h3> <a href="page-2.html"><h3>Page 2</h3></a> <a href="page-3.html"><h3>Page 3</h3></a> <div> <div id="popupBox" style="display: none;"> <div class="popupText">HELLO I AM POPUP!</div> <div class="close">✕</div> </div> </div> 

CSS:

 #popupBox { position: fixed; bottom: 10px; right: 10px; width: 322px; height: 184px; border: 1px solid #e0e0e0; background-color: rgb(255,255,255); z-index: 10; padding: 0px; border-radius:15px; } .popupText { vertical-align: middle; line-height: 184px; text-align: center; } .close { position: absolute; top: 5px; right: 10px; } h1, h3 { text-align: center; } 

Javascript:

  $(document).ready(function(){ $("#popupBox").slideDown("slow"); window.setTimeout(function() { $("#popupBox").slideUp("slow"); },300000); $(".close").click(function(){ $("#popupBox").slideUp(); }); }); 

È ansible utilizzare il file localStorage -Object ( riferimento ) per:

 $(document).ready(function(){ if( localStorage.getItem("popup") !== 'closed'){ $("#popupBox").slideDown("slow"); } window.setTimeout(function() { $("#popupBox").slideUp("slow"); },300000); $(".close").click(function(){ $("#popupBox").slideUp(); localStorage.setItem("popup", "closed"); }); }); 

Ci sono differenze tra localStorage (senza scadenza!) E sessionStorage (viene eliminato quando il browser è chiuso). Leggi il riferimento che ho collegato per ulteriori informazioni.

Tieni presente che tutti i valori in localStorage sono memorizzati come string. Devono essere convertiti se è necessario un boolean o un numero integer.

Il localStorage -Object è ad esempio per IE disponibile fin dalla versione 8. Per supportre il browser più vecchio utilizzare il cookie :

 document.cookie="popup=closed"; //Set the cookie var closed = document.cookie; // Get the cookie 

Un altro modo in cui ho scoperto (che vale la pena condividere) per avere questo codice localStorage più utile nelle altre pagine è avere un reset o una cancellazione dei contenuti memorizzati quando viene chiamato un "parametro URL".

Esempio URL: page-1.html? Popup = triggersre

Aggiunto il codice Javascript + function aggiunta per controllare il parametro URL:

 $(document).ready(function(){ if(getUrlParameter("popup") === "activate"){ localStorage.clear(); localStorage.setItem("popup", "active"); } if( localStorage.getItem("popup") !== 'closed'){ $("#popupBox").slideDown("slow"); } window.setTimeout(function() { $("#popupBox").slideUp("slow"); },300000); $(".close").click(function(){ $("#popupBox").slideUp(); localStorage.setItem("popup", "closed"); }); }); function getUrlParameter(sParam){ var sPageURL = document.location.search.substring(1); var sURLVariables = sPageURL.split('&'); for (var i = 0; i < sURLVariables.length; i++){ var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } return ""; }