Question

我正在使用内部工具编写一个网站，该工具允许使用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();
    });

});

Answer 1

要扩展我的评论，您可以使用javascript来设置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 = function（c）{ if（c == null || c ==“”）{ 返回false; } else { 返回true; } }

现在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，但检查值，你会看到差异。：）功能}

弹出窗口只出现一次

1 个答案: