javascript - 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>