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. Yet the popup will load again once the Page 2 or Page 3 is opened.

My target output is this: I want to be able to make the popup, NOT popup, whenever the close button is clicked ONCE in any pages.

I am thinking of this cookie thing, which is, though an idea, yet still I am not so far able to come up with a solution.

Please... any assistance would be appreciated?

Although having 3 pages would not be applicable much here, I still have created a jsfiddle just for documentation purposes only and quick reference http://jsfiddle.net/philcyb/wmwy04fr/2/

Thank you.

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

回答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 cookie

var closed = document.cookie; // Get the cookie

回答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");
    });
});     

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

来源：https://stackoverflow.com/questions/26924849/how-to-allow-popup-to-keep-on-popping-up-even-when-you-moved-on-to-another-page