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

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

＆＃13;

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();
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

在函数之外初始定义：

window.hasPoppedUp = false;

在弹出代码中：

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

JQuery - 只显示一次弹出窗口

2 个答案: