Question

例如，我有3个HTML页面。

我有一个javascript弹出代码，每次加载时都会弹出所有3个页面。我有一个关闭按钮，当单击时，关闭弹出窗口。然而，一旦打开页面，弹出窗口就会再次加载。

我的目标输出是这样的：我希望能够在任何页面中单击关闭按钮时弹出窗口，而不是弹出窗口。

我正在考虑这个cookie的事情，虽然这是一个想法，但我仍然无法提出解决方案。

请...任何帮助将不胜感激？

虽然这里有3页不适用，但我仍然只是为了文档目的创建了一个jsfiddle并快速参考http://jsfiddle.net/philcyb/wmwy04fr/2/

谢谢。

HTML：

<h1>Page 1</h1>

<h3>Page 1</h3>
<a href="page-2.html"><h3>Page 2</h3></a>
<a href="page-3.html"><h3>Page 3</h3></a>
<div>
    <div id="popupBox" style="display: none;"> 
    <div class="popupText">HELLO I AM POPUP!</div>
    <div class="close">✕</div>
    </div>

</div>

CSS：

#popupBox {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 322px; 
    height: 184px;
    border: 1px solid #e0e0e0;
    background-color: rgb(255,255,255);
    z-index: 10;
    padding: 0px;
    border-radius:15px;
}
.popupText {
    vertical-align: middle;
    line-height: 184px;
    text-align: center;
}
.close {
    position: absolute;
    top: 5px;
    right: 10px;
}
h1, h3 { text-align: center; }

使用Javascript：

    $(document).ready(function(){

        $("#popupBox").slideDown("slow");
        window.setTimeout(function() {
            $("#popupBox").slideUp("slow");
        },300000);

        $(".close").click(function(){
            $("#popupBox").slideUp();
        });
    });

Answer 1

您可以使用localStorage - 对象（Reference）：

$(document).ready(function(){


    if( localStorage.getItem("popup") !== 'closed'){
        $("#popupBox").slideDown("slow");            
     }
     window.setTimeout(function() {
         $("#popupBox").slideUp("slow");
      },300000);

    $(".close").click(function(){
        $("#popupBox").slideUp();
        localStorage.setItem("popup", "closed");
    });
});

localStorage（没有过期！）和sessionStorage（在关闭browsertab时删除）之间存在差异。请阅读我链接的参考资料以获取更多信息。

请注意localStorage中的所有值都存储为字符串。如果需要布尔值或整数，则必须转换它们。

localStorage - 对象是例如从版本8开始可用于IE。对于支持旧浏览器，请使用cookie：

document.cookie="popup=closed"; //Set the cookie

var closed = document.cookie; // Get the cookie

Answer 2

我发现（值得分享）另一种让这个localStorage代码在其他页面中更有用的方法是在＆＃34; URL参数＆＃34;之后重置或清除存储的内容。被称为。

示例网址：page-1.html？popup = activate

添加了Javascript代码+添加的功能来检查网址参数：

$(document).ready(function(){
    if(getUrlParameter("popup") === "activate"){
        localStorage.clear();
        localStorage.setItem("popup", "active");
    }
    if( localStorage.getItem("popup") !== 'closed'){
        $("#popupBox").slideDown("slow");
    }
    window.setTimeout(function() {
        $("#popupBox").slideUp("slow");
    },300000);

    $(".close").click(function(){
        $("#popupBox").slideUp();
        localStorage.setItem("popup", "closed");
    });
});     

function getUrlParameter(sParam){
    var sPageURL = document.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++){
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
    return "";
}

即使你移动到另一个页面，如何允许弹出窗口继续弹出＆amp;仅在单击按钮时停止？

2 个答案: