JQuery - 只显示一次弹出窗口

Question

鼠标离开屏幕时会显示以下弹出窗口。 我需要一个cookie或者其他东西只显示一次（我有点新手），但是无法弄清楚如何将它合并到代码中。

// Exit intent
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

// Exit intent trigger
addEvent(document, 'mouseout', function(evt) {
    if (evt.toElement == null && evt.relatedTarget == null ) {
        $('.lightbox').slideDown();
    };
});

// Closing the Popup Box
$(document).ready(function(){
    $('#close').click(function(){
        $('.lightbox').slideUp();
    });
});

您可以在此处查看代码： http ： //championcontainersnz.com/buy_estimate

您将提供的任何帮助将不胜感激。 谢谢。

Answer 1

以下示例将向您显示您提供的代码。 如果弹出框已经弹出，你只需要一个变量来存储。

 var isPopped = false; // Exit intent function addEvent(obj, evt, fn) { if (obj.addEventListener) { obj.addEventListener(evt, fn, false); } else if (obj.attachEvent) { obj.attachEvent("on" + evt, fn); } } // Exit intent trigger addEvent(document, 'mouseout', function(evt) { if (evt.toElement == null && evt.relatedTarget == null && isPopped == false) { $('.lightbox').slideDown(); isPopped = true; }; }); // Closing the Popup Box $(document).ready(function() { $('#close').click(function() { $('.lightbox').slideUp(); }); }); 

 .lightbox { border: solid 1px #000; padding: 50px; position: absolute; top: 50px; left: 150px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="lightbox">Hello There <button id="close">Close Me</button></div> 

Answer 2

我不是jQuery的专家，但解决方案可以像创建窗口变量一样简单。

在函数之外初始定义：

window.hasPoppedUp = false;

在弹出代码上：

if(!window.hasPoppedUp) {
    //do stuff 
    window.hasPoppedUp = true;
}