How do I make a pop-up that only appears after the visitor has been on the page for a certain amount of time?

Question

I am trying to add a non-intrusive 'Sign up to our newsletter' pop-up to a website I have been working on, but would like the pop-up to only appear after the user has been on the website for longer than 3 minutes or so. If anyone can help me achieve this that would be great.

Thanks in advance everybody

Answer 1

Right, so there are a couple things to consider. Your popup display attribute, the function that will show your popup, and the amount of time that needs to pass before your function fires.

<style>
 .SignupPopup{display:none}
</style>


<!-- Page HTML -->
<div id="SignupPopup" class="SignupPopup"></div>



<script>

  // Function that displays your popup
  function popSignupForm(){
     document.getElementById('SignupPopup').style.display = 'block';
  }

  // Using setTimeout to fire the popSignupForm function
  // in 3 minutes time (this is done in milliseconds)
  setTimeout( function(){
     popSignupForm();
  }, 180000 );

</script>

That will work so long as the user stays on the same page for 3 minutes. If you want the the popup to appear after 3 minutes on your site, you need to create a cookie and timestamp it when the user first arrives at your site. You can then measure the elapsed seconds (from the timestamp) every x intervals to see if its time to popup your newsletter signup form.

The pseudo will look something like this:

function onPageLoad(){

     If Cookie Doesn't exist for your site
        Create Cookie
        Record Timestamp


     //Start Checking the cookie to see if 
     //it's time to show the popup
     checkCookieTime()

}

function checkCookieTime(){

    // Check to see if at least 3 minutes
    // Have elapsed from the time of the cookie's
    // cookie's creation
    If Now is >= (Cookie.TimeStamp  + 3 minutes )
      popSignupForm()
    Else
      // Check again in 10 Seconds
      setTimeout( function(){
        checkCookieTime()
      }, 10000 );

}

Here's a good article from quirksmode on reading/writing cookies.

Answer 2

You can use settimeoutfunction in javascript

setTimeout(function(){},time);