How To Allow Popup To Keep On Popping Up Even When You Moved On To Another Page & Only Stops When A Button Is Clicked?

For instance I have 3 HTML pages. I have a javascript popup code that pops up in all 3 pages every time it is loaded. I have a close button that when clicked, closes the popup.

Solution 1:

You can use the localStorage-Object (Reference) for that:

$(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");
    });
});

There are diferences between localStorage (no expiration!) and sessionStorage (gets delete when the browsertab is closed). Please read the reference I linked to for more information.

Please note that all values in localStorage are stored as string. They have to be converted if a boolean or a integer is needed.

The localStorage-Object is e.g. for IE available since Version 8. For supporting older Browser use the cookie:

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

Solution 2:

Another way I found out (which is worth sharing) to have this localStorage code more useful throughout the other pages is to have a reset or clearing of stored contents when a "URL parameter" is called.

Example URL: page-1.html?popup=activate

Added Javascript code + added function to check URL parameter:

$(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");
    });
});     

functiongetUrlParameter(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"";
}