javascript - 让弹出窗口只出现一次

Question

我正在使用内部工具编写一个网站，该工具允许使用 HTML、JavaScript、JQuery 和基本的 Ruby on Rails。

我有一个弹出窗口，它以与此代码框中显示的方式相同的方式出现在屏幕上:

Link to codebox.

目前，每次用户加载页面时都会弹出此信息。我想要的行为是它为用户弹出一次，然后当他们导航回该页面时，它不应再显示。

有可能实现这个目标吗？

HTML:

<div id="hover"></div>
  <div id="popup">
    <div id="close">X</div>
      <a href="https://www.stackoverflow.com" class="twitter-follow-button" data-show-count="false" data-lang="it">Halp StackOverflow, I only want this to pop up once.</a>
    </div>
  </div>
</div>

JS:

$(document).ready(function(){

  //chiusura al click sulla parte scura
  $("#hover").click(function(){
        $(this).fadeOut();
    $("#popup").fadeOut();
    });

  //chiusura al click sul pulsante
  $("#close").click(function(){
        $("#hover").fadeOut();
    $("#popup").fadeOut();
    });

});

Answer 1

为了扩展我的评论，您可以使用 javascript 来设置 cookie。唯一的缺点是它不是持久的，这意味着如果访问者删除了他的历史记录和 cookie 以及所有爵士乐，流行音乐将再次出现。

基本上，您将有一些代码来检查是否设置了 cookie，如果未设置，则显示弹出窗口，然后设置 cookie。

if (!CHECK_COOKIE(GET_COOKIE(CUSTOM_COOKIE_NAME))) {
    // generate the popup html
    // and append it to the DOM

    // now you set the cookie (because it wasn't set before)
    setTimeout("SET_COOKIE(365)", 1000);
}

我将包含上面的 cookie 函数，以便您了解如何使用它们。

首先我们从 cookie 检查函数开始: //该函数中的c就是cookie var cookie_check = 函数(c) { if (c == null || c == "") { 返回假； } 别的 { 返回真； } }

现在是 cookie 获取函数(该函数基本上为提供的 name 参数获取 cookie):

var cookie_get = function(name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(name + "=");
            if (c_start != -1) {
                c_start = c_start + name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if (c_end == -1) {
                    c_end = document.cookie.length;
                }
                return unescape(document.cookie.substring(c_start, c_end));
            }
        }
        return "";
    }

最后但并非最不重要的一点是 cookie setter :

var cookie_set = function(expiredays, cookie_name, value) {
        var exp = new Date();
        exp.setDate(exp.getDate() + expiredays);
        // set cookie
        document.cookie = name + '=' + value + ';path=/' + ((expiredays == null || expiredays == 0) ? '' : ';expires=' + exp.toGMTString());
    }

最后，这里有一个简单的例子:)

JSFiddle Demo

<小时/>

^{上面 jsfiddle 演示中的 cookie 名称未设置，因为他们 (JSFiddle) 将 cookie 名称设置为 result，但检查该值并你会看到不同。 :)}