当页面第二次加载时如何停止弹出？答案

【问题标题】：how to stop pop up to appear when the page loads for the second time?当页面第二次加载时如何停止弹出？
【发布时间】：2014-06-09 19:18:15
【问题描述】：

html页面：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Modal Window from Queness</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {  

        var id = '#dialog';

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

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

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

        //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(2000);     

    //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();
    });     

});

</script>

<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}
</style>
</head><body>
<div style="font-size: 10px; color: #000;">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
<a href="#" class="close">Close it</a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>

</html>

嗨，上面是我的代码，其中每当页面加载时都会出现一个弹出窗口。但我想要的是弹出窗口必须只在一个用户第一次刷新或加载页面时出现。这可能吗??

【问题讨论】：

使用 cookie 或本地存储

标签： javascript jquery popup hide session-cookies

【解决方案1】：

您应该使用cookie 或local storage。

遵循逻辑思维：当您的客户端第一次访问您的应用程序时，创建一个名为first_time 的cookie，其值为false。然后，您必须让 JavaScript 检查 cookie first_time 是否具有 true 作为值，如果是，则显示您的弹出窗口，否则，什么也不做。

注意！

本地存储 - 如果您想使用它 - 是 HTML5 的功能，您需要使用 polyfill 才能在旧版浏览器上无缝使用它。

【讨论】：

【解决方案2】：

您应该使用 cookie 或本地存储，因为您的 javascript 的生命周期在您刷新页面时结束。

$(document).ready(function() {  

    var firstTime = localStorage.getItem("firstTime");

    if(! firstTime){
       // all your current code
       localStorage.setItem("firstTime", true);
    }

});

【讨论】：

和cookies一样，localStorage只存储字符串，所以存储的值不会是true，而是"true"。上面的代码仍然可以工作，但要注意false 或0 之类的值也将作为字符串检索，因此也将作为true 进行测试。
@Blazemonger 我理解你的观点——你是对的！ -，但这里没有上下文差异 - 效果是一样的。打字对客户端食谱完全没有影响。
boolean firstTime 我认为您的意思是使用声明性var 声明
@A. Wolff 谢谢，我最近一直在做很多 JAVA
@Blazemonger 我的代码在 jquery 中，如何在其中实现 javascript？？