如何在访问者在页面上停留一段时间后才显示弹出窗口？

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

}

这是quirksmode关于读/写cookie 的好文章.

Answer 2

您可以在javascript中使用settimeoutfunction

setTimeout(function(){},time);