Fatal编程技术网
  • javascript/
  • Javascript 当页面第二次加载时，如何停止弹出显示？

Javascript 当页面第二次加载时，如何停止弹出显示？

javascript jquery

Javascript 当页面第二次加载时，如何停止弹出显示？,javascript,jquery,popup,hide,session-cookies,Javascript,Jquery,Popup,Hide,Session Cookies,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://aja

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>


来自Queness的简单JQuery模式窗口
$（文档）.ready（函数（）{
变量id='#对话框'；
//获取屏幕的高度和宽度
var maskHeight=$（document.height（）；
var maskWidth=$（window.width（）；
//设置遮罩的高度和宽度以填充整个屏幕
$（'#mask'）.css（{'width'：maskWidth，'height'：maskHeight}）；
//过渡效应
$（'面具'）.fadeIn（1000）；
$（#mask'）.fadeTo（“慢”，0.8）；
//获取窗口的高度和宽度
var winH=$（window.height（）；
var winW=$（window.width（）；
//将弹出窗口设置为居中
$（id）.css（'top'，winH/2-$（id）.height（）/2）；
$（id）.css（'left'，winW/2-$（id）.width（）/2）；
//过渡效应
美元（id）.fadeIn（2000年）；
//如果单击“关闭”按钮
$（'.window.close'）。单击（函数（e）{
//取消链接行为
e、 预防默认值（）；
$（“#掩码”）.hide（）；
$（'.window'）.hide（）；
});     
//如果单击了“遮罩”
$（“#掩码”）。单击（函数（）{
$（this.hide（）；
$（'.window'）.hide（）；
});     
});
身体{
字体系列：verdana；
字体大小：15px；
}
a{color:#333；文本装饰：无}
a:悬停{颜色：#ccc；文本装饰：无}
#面具{
位置：绝对位置；
左：0；
排名：0；
z指数：9000；
背景色：#000；
显示：无；
}  
#盒子，窗户{
位置：绝对位置；
左：0；
排名：0；
宽度：440px；
高度：200px；
显示：无；
z指数：9999；
填充：20px；
}
#对话框{
宽度：375px；
高度：203px；
填充：10px；
背景色：#ffffff；
}
除非另有说明，本网站上的内容是根据知识共享署名3.0许可证授权的。
您好，上面是我的代码，其中每当加载页面时，都会出现一个弹出窗口。但我想要的是，当一个用户刷新或加载页面时，该弹出窗口只能第一次出现。是否可能？？？

您应该使用或

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

注意

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

您应该使用或

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

注意

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

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

$(document).ready(function() {  

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

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

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

$(document).ready(function() {  

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

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

});
使用cookie或localStorage使用cookie或localStorage与cookie类似，localStorage只存储字符串，因此存储的值不是
true
，而是
“true”
。上面的代码仍然有效，但需要注意的是，
false
或
0
等值也将作为字符串检索，因此也将作为
true
进行测试@Blazemonger我理解您的观点-您是对的！-，但是这里没有上下文上的差异——效果是一样的。键入根本不适用于客户端配方。
boolean firstTime
我认为您的意思是使用声明性
var
statement@A.沃尔夫：谢谢，我一直在做很多事情lately@Blazemonger我的代码在jquery中，如何在其中实现javascript？就像cookies一样，localStorage只存储字符串，因此存储的值将不是
true
，而是
“true”
。上面的代码仍然有效，但需要注意的是，
false
或
0
等值也将作为字符串检索，因此也将作为
true
进行测试@Blazemonger我理解您的观点-您是对的！-，但是这里没有上下文上的差异——效果是一样的。键入根本不适用于客户端配方。
boolean firstTime
我认为您的意思是使用声明性
var
statement@A.沃尔夫：谢谢，我一直在做很多事情lately@Blazemonger我的代码在jquery中，如何在其中实现javascript？？