弹出框以在每次站点访问时出现一次 [英] Pop up box to appear once per site visit

问题描述

我的网站上出现了一个弹出框，每次访问或刷新主页时都会出现该弹出框。我设法使用...

I have a pop up box that appears on my site which was appearing each time the home page was visited or refreshed. I managed to use...

var firstTime = localStorage.getItem("firstTime");
if(! firstTime){

localStorage.setItem("firstTime", true);
}
});

...让它只出现一次，但有人知道我怎么让它出现一次每次访问该网站（而不是页面）？这样，当你回到网站时它就不会出现。任何帮助都会很棒！完整代码如下...

...to get it to appear once only but does anyone know how I get it to appear once per visit to the site (not the page)? As this way it doesn't appear when you go back to the site. Any help would be great! Full code is below...

    <script type="text/javascript">
    $(document).ready(function() {  
    var firstTime = localStorage.getItem("firstTime");

    if(! firstTime){

        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(500); 
        $('#mask').fadeTo("slow",0.9);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(500);  

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     
           localStorage.setItem("firstTime", true);
    }
    });

</script>

//rest of html content

    <!-- Pop-up window - Subscribe -->
<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
<a href="#" class="close">X</a>
<center><img src="img/pop-up-logo.png" alt=""/><br><br><br>

<a href="subscribe.html" class="btn btn-primary"><strong>Subscribe</strong> </a> <br><br>

    <h2>to receive email updates</h2> </center>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
<!-- Pop-up window - Subscribe End -->

推荐答案

您必须查看上次访问的时间页面发生，通常30分钟会话是常见的（虽然没有足够的数据来支持这一点）

You will have to check the time when last visit on the page happens, generally 30 minutes sessions are common (don't have sufficient data to support this though)

所以，请在localstorage中设置访问时间

so, set the visit time instead in the localstorage

localStorage.setItem("visitTime", new Date().getTime() );

并在下次检查此值，无论是在30分钟之前（或60分钟是安全的）或者在30分钟（或60分钟）之后

and check this value next time, whether it is before 30 min (or 60 min to be safe) or after 30 min (or 60 min)

更新了这个小提琴给你。截至目前，我已将间隔时间设置为1分钟，以便您可以对其进行测试。

Updated this fiddle for you. As of now I have set the interval time to 1 min so that you can test it.

var timeIntervalToAssumeNewSiteVisit = 1*60*1000; //in milliseconds
$(document).ready(function() {  

  var currentTime = new Date().getTime();
    var lastVisitTime = parseInt( localStorage.getItem("lastVisitTime") );

    if( isNaN( lastVisitTime ) || ( currentTime - lastVisitTime )  >= timeIntervalToAssumeNewSiteVisit )
      {
        alert( "new visit" );
      }
  else
    {
      alert( "same visit, old session" );
    }
       localStorage.setItem("lastVisitTime", currentTime);

});

这篇关于弹出框以在每次站点访问时出现一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！