CODEWITHSUNDEEP
javascriptpopup
snarf1974
snarf1974

Reputation: 5

Display a popup a couple of times

I've created a popup that triggers when the user scrolls to a certain part of the page:

  if(localStorage.getItem('popState') != 'shown'){
    var modalwaypoint = $('#learning').waypoint({
      handler: function(direction) {
        if (direction == 'down') {
          $('#modalwaypoint').foundation('open');
          localStorage.setItem('popState','shown')
        }
        this.destroy()
      },
      offset: '10%'
    });
  }

I think when someone looks at the page they may delete the pop-up first time, but on coming back to the page and seeing the pop-up again they may be more tempted to click the CTA.

I'd like to keep the localStorage method, but allow the popup box to show again after x amount of hours or days, and then not show after that. I'm fairly new to javascript, so still trying to get my head around it, can anyone help?

Many Thanks

snarf1974

Upvotes: 0

Views: 725

Answers (1)

gforce301
gforce301

Reputation: 2984

Using localStorage why not set something like the following at the same time you store popState?

localStorage.setItem('popupLastShown', new Date().getTime());

Then you can

  • Retrieve the last time the popup was shown
  • Decide if it should be shown again
  • If you show it, store the new time

Here is the example you asked for in your comment. Keep in mind it's simple and that I am not familiar with the waypoint or foundation methods that you are using.

    function showPopup() {
        var lastShown = localStorage.getItem('popupLastShown'),
            now = new Date().getTime();

        if(localStorage.getItem('popState') !== 'shown') {
            return true;
        }

        if((now - lastShow) >= 86400000 /* 1 day in milliseconds */) {
            return true;
        }

        return false;
    }

    if(showPopup()){
        var modalwaypoint = $('#learning').waypoint({
            handler: function(direction) {
                if (direction == 'down') {
                    $('#modalwaypoint').foundation('open');
                    localStorage.setItem('popState','shown');
                    localStorage.setItem('popupLastShown', new Date().getTime());
                }

                this.destroy();
            },

            offset: '10%'
        });
    }

Upvotes: 1

Related Questions