JQuery - 一度だけポップアップを表示

Question

マウスが画面を離れると、次のポップアップが表示されます。私はこれを一度だけ表示するためにクッキーなどを必要とします（私はちょっとした初心者ですが）、これをコードに組み込む方法を考えることはできません。

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