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

时间:2012-07-04 15:28:40

标签: javascript popup

我正在尝试在我正在处理的网站上添加一个非侵入式“注册我们的简报”弹出窗口,但希望弹出窗口仅在用户访问网站后显示超过3分钟左右。如果有人能帮助我实现这一点,那就太好了。

先谢谢大家

2 个答案:

答案 0 :(得分:7)

是的,所以有几件事需要考虑。弹出显示属性,显示弹出窗口的函数,以及函数触发前需要传递的时间。

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

答案 1 :(得分:6)

您可以在javascript中使用settimeout函数

setTimeout(function(){},time);
相关问题