javascript - 如何制作仅在访问者在页面上停留一定时间后才会出现的弹出窗口？

Question

我正在尝试向我一直在使用的网站添加一个非侵入性的“注册我们的时事通讯”弹出窗口，但希望该弹出窗口仅在用户访问该网站后出现超过 3 分钟左右。如果有人能帮助我实现这一目标，那就太好了。

先谢谢大家

Answer 1

是的，所以有几件事需要考虑。您的弹出窗口显示属性、显示弹出窗口的函数以及函数触发前需要耗时量。

<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>

只要用户在同一个页面上停留 3 分钟，它就会起作用。如果您希望弹出窗口在 您的网站 3 分钟后出现，您需要创建一个 cookie 并在用户首次访问您的网站时为其添加时间戳。然后，您可以每隔 x 个时间间隔测量经过的秒数(从时间戳开始)，看看是否到了弹出新闻通讯注册表单的时间。

伪将看起来像这样:

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关于读/写 cookie。