JQuery - 仅显示弹出窗口一次

当鼠标离开屏幕时，将显示以下弹出窗口。我需要一个cookie或者一些东西来显示这一次（我是一个新手），但是无法弄清楚如何将它加入到代码中。JQuery - 仅显示弹出窗口一次

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

任何帮助，您可以提供将不胜感激。谢谢。

来源

2016-11-28 N00b

没有饼干。只需创建一个全局变量'var hasLeftScreen = false;'，然后在第一次离开时将其设置为true。将这个条件添加到你的ifs中。 – nurdyguy

你是否想再次展示它或者仅仅在该页面上展示？ – Yatrix

当弹出窗口显示时，创建一个cookie，稍后检查cookie是否存在。 – Aleksandar

下面的例子将告诉你与你所提供的代码。你只需要一个变量来存储盒子是否弹出。

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>

来源

2016-11-28 22:26:45 CodeLikeBeaker

杰出的杰森。有用！非常感谢您花时间提供此答案。简单但有效。做得好。 – N00b

@ N00b谢谢:) – CodeLikeBeaker

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

定义这个initally，函数外：

window.hasPoppedUp = false;

在弹出代码：

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

来源

2016-11-28 21:43:43

谢谢哈利。对不起，我很痛苦，但我怎么可能将这段代码合并到我的原始代码？ – N00b

JQuery - 仅显示弹出窗口一次

回答

相关问题