How to allow popup to keep on popping up even when you moved on to another page & only stops when a button is clicked?

Question

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

empiric · Accepted Answer · 2014-11-14T08:12:19.943

2

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

edited Nov 14 '14 at 08:12

answered Nov 14 '14 at 07:25

empiric

7,825
7
37
48

Thank you for the response. I'm still doing some tests and am not able to make it work. I'll check further the reference you sent me and get back to this question when I'm on the right direction. Thanks again. A good start for me. – Philcyb Nov 14 '14 at 07:44
@Philcyb i created i fiddle with a working example [fiddle](http://jsfiddle.net/wmwy04fr/4/). Just play around with the commented lines to see the difference – empiric Nov 14 '14 at 08:00
thanks again for the additional assistance. I've been playing around too locally with the codes you shared. It may have worked but I'm not too sure yet. Just one question, if cookies has this clear history on browsers to reset saved data, what's the localStorage way of clearing such saved data? – Philcyb Nov 14 '14 at 08:05
@Philcyb I'm not 100% sure but I think this option will clear the localStorage too. – empiric Nov 14 '14 at 08:09
hi empiric. after doing tests. your code really worked and you have answered my questions; resolving my code problem. though the browser's clear cookie history thing didn't work! I still thank you. :) – Philcyb Nov 14 '14 at 08:52
you're welcome. I'm not sure how the different browser handle the clear cache and clear cookies function in order to clear the localStorage. There must be some tests and research done ;-) – empiric Nov 14 '14 at 08:56

score 0 · Answer 2 · answered Nov 17 '14 at 07:38

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

How to allow popup to keep on popping up even when you moved on to another page & only stops when a button is clicked?

2 Answers2

Linked