I am working on one project in which I want to show

1. If a user visits 5 pages on the website display a popup
2. If a user stays 2 min on the website display a popup
3. If the user closes the popup then does not show the popup again.

The only problem is if a user visits 5 pages. In my code, if the user visits the home page 5 times it displays the popup and it is not working if the user visits 5 other pages.

What I want "If the user visits 5 pages it can be any page on the website display the popup"

Here is the code...

var popup = '<div  id="sub-popup">';
            popup  = '<div id="subscribe-popup" >';
            popup  = '<a  onclick="closePopup()">&times;</a>';
            popup  = '<h1 >Subscribe here!</h1>';
            popup  = '<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
            popup  = '<a  onclick="hidePopup()">Subscribe</a>';
            popup  = '</div>';
            popup  = '</div>';

function closePopup() {
    $('#sub-popup').remove();
    localStorage.displayPopup = 0;
}

function hidePopup() {
    $('#sub-popup').remove();
    localStorage.displayPopup = 0;
    window.open("https://upesy.us17.list-manage.com/subscribe/post?u=4f67f99a5b6bf0f744449df73&id=45f50ab267", "_blank");
}

jQuery(document).ready(function($) {

    function getCookieVal(offset) {
        var endstr = document.cookie.indexOf(";", offset);
        if (endstr == -1)
            endstr = document.cookie.length;
        return unescape(document.cookie.substring(offset, endstr));
    }

    function GetCookie(name) {
        var arg = name   "=";
        var alen = arg.length;
        var clen = document.cookie.length;
        var i = 0;
        while (i < clen) {
            var j = i   alen;
            if (document.cookie.substring(i, j) == arg)
                return getCookieVal(j);
            i = document.cookie.indexOf(" ", i)   1;
            if (i == 0)
                break;
        }
        return null;
    }

    function SetCookie(name, value) {
        var argv = SetCookie.arguments;
        var argc = SetCookie.arguments.length;
        var expires = (2 < argc) ? argv[2] : null;
        var path = (3 < argc) ? argv[3] : null;
        var domain = (4 < argc) ? argv[4] : null;
        var secure = (5 < argc) ? argv[5] : false;
        document.cookie = name   "="   escape(value)  
            ((expires == null) ? "" : ("; expires="   expires.toGMTString()))  
            ((path == null) ? "" : ("; path="   path))  
            ((domain == null) ? "" : ("; domain="   domain))  
            ((secure == true) ? "; secure" : "");
    }

    function displayPopup() {
        var expdate = new Date();
        var visit;
        expdate.setTime(expdate.getTime()   (24 * 60 * 60 * 1000 * 365));
        if (!(visit = GetCookie("upesy-cookie")))
            visit = 0;
        visit  ;

        SetCookie("upesy-cookie", visit, expdate, "/", null, false);
        
        if (visit >= 4) {
            if(localStorage.displayPopup != 0) {
                setTimeout(function(){
                    $(document.body).append(popup);
                    SetCookie("upesy-cookie", 0);
                }, 2000);
            }
        }
    }
    
    //window.onload = displayPopup
    $(window).on("load", displayPopup);

    // Timer

    if (localStorage.getItem('displayPopup') !== '0') {
        const openTime = Date.now();
      
        const totalVisitTime =  localStorage.getItem('totalVisitTime');
        console.log(totalVisitTime)
      
        setTimeout(() => {

          if(localStorage.displayPopup != 0) {
            setTimeout(function(){
                $(document.body).append(popup);
                SetCookie("upesy-cookie", 0);
            }, 2000);
        }
        
          localStorage.setItem('displayPopup', '0');
          localStorage.removeItem('totalVisitTime');
        }, 12e4 - totalVisitTime);
      
        window.addEventListener('beforeunload', () => {
          if (localStorage.getItem('displayPopup') === '0') return;
          localStorage.setItem(
            'totalVisitTime',
            totalVisitTime   Date.now() - openTime
          );
        });
      }
});

CodePudding user response：

Using the storage API is simpler than using cookies. You can extend the timer with a counter

const popup =
  '<div  id="sub-popup">'  
  '<div id="subscribe-popup" >'  
  '<a  onclick="closePopup()">&times;</a>'  
  '<h1 >Subscribe here!</h1>'  
  '<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'  
  '<a  onclick="hidePopup()">Subscribe</a>'  
  '</div>'  
  '</div>';

function closePopup() {
  document.getElementById('sub-popup').remove();
  localStorage.setItem('displayPopup', 0);
}

function hidePopup() {
  closePopup();
  window.open(
    'https://upesy.us17.list-manage.com/subscribe/post?u=4f67f99a5b6bf0f744449df73&id=45f50ab267',
    '_blank'
  );
}

function displayPopup() {
  if (localStorage.getItem('displayPopup') !== '0') {
    /*setTimeout(function () {
      $(document.body).append(popup);
      SetCookie('upesy-cookie', 0);
    }, 2000);*/
    document.body.innerHTML  = popup;
  }
  localStorage.setItem('displayPopup', '0');
  localStorage.removeItem('totalVisitTime');
  localStorage.removeItem('totalVisitCount');
}

if (localStorage.getItem('displayPopup') !== '0') {
  const openTime = Date.now();

  const totalVisitTime =  localStorage.getItem('totalVisitTime');
  console.log(totalVisitTime);

  const totalVisitCount =  localStorage.getItem('totalVisitCount')   1;
  localStorage.setItem('totalVisitCount', totalVisitCount);
  console.log(totalVisitCount);

  if (totalVisitCount >= 5) {
    displayPopup();
  }

  setTimeout(() => {
    displayPopup();
  }, 12e4 - totalVisitTime);

  window.addEventListener('beforeunload', () => {
    if (localStorage.getItem('displayPopup') === '0') return;
    localStorage.setItem(
      'totalVisitTime',
      totalVisitTime   Date.now() - openTime
    );
  });
}