prevent pop up after refresh the page

Question

I'm creating a popup that will show when the user scrolls. However when the user clicks on the close button and refreshes the page and scrolls, I need to make a popup to show up after 10 minutes.

var popUp= document.getElementById("popup");
var closePopUp= document.getElementsByClassName('popup-close');
var halfScreen= document.body.offsetHeight/2;
var showOnce = true;

//show when scroll
window.onscroll = function(ev) {
    if ((window.innerHeight+window.scrollY) >= halfScreen && showOnce) {
        if(popUp.className === "hide"){
            popUp.className = "";
        }
        showOnce = false;
    }
};

//close button
for(var i = 0; i<closePopUp.length; i++){
    closePopUp[i].addEventListener('click', function(event) {
        if(popUp.className === ""){
            popUp.className = "hide";
        }
    });
}

Perhaps, using set timeout function would suffice. Refer this http://stackoverflow.com/questions/24849/is-there-some-way-to-introduce-a-delay-in-javascript — Gayathri, Jan 06 '17 at 05:52

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

You should use cookie for this and set cookie expiration time for 10 minutes take a look at this cookie plugin hope it helps

Set a cookie

$.cookie("example", "foo"); // Sample 1
$.cookie("example", "foo", { expires: 7 }); // Sample 2

Get a cookie

alert( $.cookie("example") );

Delete the cookie

$.removeCookie("example");

Or there is an example which is given in this answer take a look at this also

edited May 23 '17 at 11:53

Community

1
1

answered Jan 06 '17 at 05:47

Curiousdev

5,668
3
24
38

thanks for comment but i want to use only vanila javascript no other 3rd party – GerryofTrivia Jan 07 '17 at 01:02

score 0 · Answer 2 · edited May 23 '17 at 12:01

First you should detect whether the user has refreshed the page.You can achieve this using navigator object.Refer this question for implementation.

Secondly, once the user refreshes the page all the variables gets destroyed and initialized again.Hence you must use cookies or server side sessions to store whether user has already closed it once.But I always recommend you to setup sessions since cookies can be disabled by users.

To sum it up,setup an ajax request once the user refreshes the page,and if already he has closed the popup once, start a timeout for 10 minutes. Adding a sample prototype for this :

var refreshed = false;
if (performance.navigation.type == 1) {
  console.info( "This page is reloaded" );
  refreshed = true;
} else {
  console.info( "This page is not reloaded");
  refreshed = false;
}
if(refreshed) {
    //implement this ajax function yourself.
    ajax('path/to/yourserver','method','data',function(response) {
        if(response == "showed") {
            var time = 10 * 60 * 1000;//10 minutes.
            setTimeout(function() {
                //show your popup.
            },time);
        }else {
            //immediately show once scrolled.
        }
    });
}

prevent pop up after refresh the page

2 Answers2