Show modal after Time Delay

JavaScript
1

I have been reading this very nice article by James Hibbard Show modal after Time Delay.

Now I am wondering if it is possible to have the modal fired affter a visitor is a certain amount of time on the page. I asked @James this in a personal message. He said that this was /is possible by keeping count of how long they have been there in localStorage, but I have no idea how to do something like that. He suggested to make it a post in the forum so that others would also benefit from it :slight_smile:

2

Hey donboe,

You should ping me with @Pullo :slight_smile:

Just to clarify, this is what you want:

  • Popup should fire after user has been on a page for (say) 60 seconds
  • User hits page A and stays there for 30 seconds
  • User navigates to page B and stays there for 45 seconds
  • User goes back to page A and stays there for a further 15 seconds
  • User goes to page C and stays there for 10 seconds
  • User returns to page A and stays there for 15 seconds
  • At this point the popup should open on page A

Did I get that right?

3

Excusez-moi @James_Hibbard :grin: Yes that is bassically where I’m after, because it meens that is interrested in the website

4

You can do this if the scroll down event is not fired after some time period ie

window.addEventListener('scroll',function(e) {
    //timer starts here and then code for pop up appearing
});
5

Hi donboe,

Here’s a basic example to get you going.

Page A:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Timer</title>
  </head>

  <body>
    <h1>Page A</h1>
    <p>
      Time on page: <span id="time"></span>
    </p>
    <p>
      Popup shown: <span id="shown"></span>
    </p>
    <p>
      <a href="b.html">Page B</a>
    </p>

    <script>
      const Timer = (function (d) {
        let timeOnPage = Number(localStorage.getItem('timeOnPage')) || 0;
        const timeAfterWhichToShowPopup = 15;
        const timeSpan = d.querySelector('#time');
        const shownSpan = d.querySelector('#shown');

        const shown = () => {
          return localStorage.getItem('popupShown');
        };

        const updateHTML = () => {
          shownSpan.textContent = shown()? 'true' : 'false';
          timeSpan.textContent = timeOnPage;
        };

        const tick = () => {
          if(timeOnPage >= timeAfterWhichToShowPopup){
            alert("hi");
            localStorage.setItem('popupShown', true);
            updateHTML();
          } else {
            setTimeout(()=>{
              timeOnPage += 1;
              localStorage.setItem('timeOnPage', timeOnPage);
              updateHTML();
              tick();
            }, 1000);
          }
        };

        const init = () => {
          updateHTML();
          if (shown()) return;
          tick();
        };

        return {
          init
        };
      })(document);

      Timer.init();
    </script>
  </body>
</html>

Page B:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Timer</title>
  </head>

  <body>
    <h1>Page B</h1>
    <p>Hang about here for a bit, then go back to page A.</p>
    <p><a href="a.html">Page A</a></p>
  </body>
</html>

The way it works is that a timer will run all the while you are on page A. Once you have been on page A for 15 seconds, an alert will fire (which in your case would be the modal).

I’ve added a bunch of logging code, to give you an idea of what is happening. You can obviously delete this for the live site.

If you want to reset the demo once it has run, delete the values from localStorage using your browser’s console.

HTH

2 Likes
6

@ Pullo. Very very nice. :smile: Thank you so much. I am playing arround with it a bit. I will keep you informed of my progress.

7

@James_Hibbard. Hi I just started to test the functionallity of this but get an error on this line:

let timeOnPage = Number(localStorage.getItem('timeOnPage')) || 0;
8

Hi donboe, which error do you get and which browser are you using?

9

Hi Pullo. I allready get an error in the editor. And when I test it nothing is happening and I get a typeError:

shownSpan is null
updateHTML
http://flyingparadise.local/:451:35
init

I test it right now in FF but this is what i get in Chrome:

Uncaught TypeError: Cannot set property ‘textContent’ of null
at updateHTML ((index):451)
at Object.init ((index):471)
at (index):481

10

As the error says, shownSpan is null. It’s probably a typo in the code.

Can you copy/paste the code you currently have that is causing that error (without PHP, pls).

11

I simply copied your code:

<script>
      const Timer = (function (d) {
        let timeOnPage = Number(localStorage.getItem('timeOnPage')) || 0;
        const timeAfterWhichToShowPopup = 15;
        const timeSpan = d.querySelector('#time');
        const shownSpan = d.querySelector('#shown');

        const shown = () => {
          return localStorage.getItem('popupShown');
        };

        const updateHTML = () => {
          shownSpan.textContent = shown()? 'true' : 'false';
          timeSpan.textContent = timeOnPage;
        };

        const tick = () => {
          if(timeOnPage >= timeAfterWhichToShowPopup){
            alert("hi");
            localStorage.setItem('popupShown', true);
            updateHTML();
          } else {
            setTimeout(()=>{
              timeOnPage += 1;
              localStorage.setItem('timeOnPage', timeOnPage);
              updateHTML();
              tick();
            }, 1000);
          }
        };

        const init = () => {
          updateHTML();
          if (shown()) return;
          tick();
        };

        return {
          init
        };
      })(document);

      Timer.init();
</script>

at the very bottom of the page

12

Replace textContent with innerText, that should work

13

@rpkamp. That doesn’t give any change. Still the same error

14

And do you have the relevant HTML in the page?

<p>
  Time on page: <span id="time"></span>
</p>
<p>
  Popup shown: <span id="shown"></span>
</p>
15

yes I have. I am now just adding everything line by line. I will keep you updated

16

@James_Hibbard. I think something went wrong with the copy paste because now it is just working fine. Very nice Pullo. Now I will try to implement it along with Colorbox. will keep you updated.

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.