Question

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>

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

Answer 1

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

$(document).ready(function() {  

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

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

});

Answer 2

您应该使用cookie或local storage。

遵循逻辑思维：客户第一次访问您的应用程序时，创建一个名为first_time的cookie，其值为false。然后，您必须检查Cookie first_time是否有true作为值，如果是，则显示弹出窗口，否则不执行任何操作。

<强>注意！

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

如何在页面第二次加载时停止弹出？

2 个答案: