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的專家，但解決方案可能與創建窗口變量一樣簡單。

定義這個initally，函數外：

window.hasPoppedUp = false; 

在彈出代碼：

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