使弹出窗口只出现一次

Make popup appear only once

本文关键字：一次 窗口      更新时间：2023-09-26

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

要扩展我的注释，您可以使用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是cookievar cookie_check=函数（c）{if（c==null ||c=="）{return false；}其他{返回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设置器：

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演示

上面jsfiddle演示中的cookie名称没有设置，因为他们（jsfiddle）将cookie名称设置为result，但检查该值，您会看到差异。：）

相关文章：