使弹出窗口只出现一次答案

【问题标题】：Make popup appear only once使弹出窗口只出现一次
【发布时间】：2014-09-11 08:33:28
【问题描述】：

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

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

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

有可能实现吗？

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

});

【问题讨论】：

您可以为此使用cookies或localstorage，保存用户已经访问过该页面的事实。
使用 javascript 是不可行的。可能您正在寻找的是会话或 cookie。
最好的办法是使用 cookie。
@Regent 我可以为此使用 JavaScript 吗？我认为 Ruby 会是最好的，但我使用的内部工具只支持一组限制性的 Ruby 操作，所以我不确定这是否能正常工作。
@Darren 你能指出我将如何做到这一点的任何资源吗？我对 Ruby on rails 相当陌生，并试图了解它。非常感谢。

标签： javascript jquery html ruby-on-rails web

【解决方案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 设置器：

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，但检查值，你会看到不同之处。 :)}

【讨论】：