使用带 JavaScript 的 cookie 防止触发操作

Question

在 wordpress 网站中，我有一个由 "mouseleave" 事件触发的弹出窗口 window（用于电子邮件捕获）。

弹出窗口工作正常，但是一旦信息被捕获或弹出窗口 window 关闭，我不想再用这个弹出窗口打扰访问者。所以我想设置一个 cookie，它会检测到这个事件已经发生，并且直到一周或一个月后才会再次触发该访问者。

代码如下：

<script>
    jQuery(document).ready(function() {
        jQuery('html').one("mouseleave", function(e){
            jQuery('.backdrop, .box').animate({'opacity': '.50'}, 300, 'linear');
            jQuery('.box, .box').animate({'opacity': '1.00'}, 300, 'linear');
            jQuery('.backdrop, .box').css('display', 'block');
            jQuery( this ).off( event );
            });
            jQuery('.close').click(function(){
                jQuery('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
                    jQuery('.backdrop, .box').css('display', 'none');
                    });
                });
                jQuery('.close').click(function(){
                    close_box();
                    });             
                jQuery('.backdrop').click(function(){
                    close_box();
                    });
    });

    function close_box()
    {
    jQuery('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
                    jQuery('.backdrop, .box').css('display', 'none');
    });
    }
</script>

这里是 HTML:

   <h1>THIS IS MY WEB PAGE </h1>



   <div class="backdrop"></div>
   <div class="box"><div class="close">X</div>
   <div class="box-content">
   THIS IS THE LIGHT BOX<br>

   <p>SOME INFO</p>
   </div>
   </div>

这是 CSS:

.backdrop {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#000;
    opacity:.0;
    filter:alpha(opacity=0);
    z-index:50;
    display:none;
    }
.box {
    position: fixed;
    top: 20%;
    left:30%;
    background: url("box-img.jpg") repeat scroll 0 0 #fff;
    z-index:51;
    padding:10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 0px 5px #444444;
    box-shadow:0px 0px 5px #444444;
    display:none;
    height: 650px;
    width: 600px;
    }

.close {
    float:right;
    margin-right:6px;
    cursor:pointer;
    }

我怎样才能做到这一点？

Answer 1

使用 jQuery Cookie Plugin.

然后您需要使用

设置过期 cookie

$.cookie('name', 'value', { expires: 7 });

它为您的 name 设置了一个 cookie（针对您的应用程序更改）并在 7 天后过期（设置您喜欢的方式）。然后只需使用以下命令检查 cookie 是否存在。如果是，则跳过弹出代码，否则执行弹出代码。

if(!$.cookie('name')) {
  // Do your popup jQuery code.
}

Answer 2

我冒昧地将你的脚本包装在一个无冲突的闭包中以提高可读性，并将对同一选择器的 jQuery 对象构造函数的任何重复调用移动到分隔变量。

基本上我们使用 Window.localStorage（内置于浏览器中，不需要额外的插件）在客户端存储信息，但首先我们检查该 cookie 是否已经设置，是否已设置，那么如果它早于一个月（或 2628000000 毫秒）

我将所有函数都放在 if 语句中，因此如果用户已经看到弹出窗口，则什么也不会发生。

_{注意：这里不使用cookies，不同之处的解释请看：

What is the difference between localStorage, sessionStorage, session and cookies?}

_{编辑：因为你在（已删除的）评论中要求你需要这个运行在单独的页面上独立我已经包含了一个this}

的对象解决方案

(function ($) {
    var storage = window.localStorage
    $(document).ready(function () {
        var poppedPages;
        if(!storage.poppedPages) {
            poppedPages = {}; 
        } else {
            poppedPages = JSON.parse(storage.poppedPages);
        }
        if(!storage.popped || !storage.poppedPages[location] || storage.popped - Date.now() > 2628000000) {
            // 2628000000 === One month's worth of milliseconds
            storage.popped = Date.now();
            poppedPages[location] = true; // insert a new property for the current page
            var backdropBox = $('.backdrop, .box')

            function open_box() {
                $('html').one("mouseleave", function (e) {
                    backdropBox.animate({
                        'opacity': '.50'
                    }, 300, 'linear');
                    $('.box, .box').animate({
                        'opacity': '1.00'
                    }, 300, 'linear');
                    backdropBox.css('display', 'block');
                });
                $('.close, .backdrop').one('click', close_box);
            }
            function close_box() {
                backdropBox.animate({
                    'opacity': '0'
                }, 300, 'linear', function () {
                    $('.backdrop, .box').css('display', 'none');
                });
            }

            open_box();
        }
        storage.poppedPages = JSON.stringify(poppedPages);
    });
})(jQuery);

使用带 JavaScript 的 cookie 防止触发操作

Prevent a triggering action using a cookie with JavaScript

javascript

cookies