Pop up on page load only to load once per user

Question

I have set up a overlay background on page load, however i only need it to load once per user so that if click off the page and come back you dont see the overlay again. any help with this would be highly appreciated. Here's my code:

<div class="overlay-bg">

    <div class="overlay-inner">
        <h2>To explore more simply...</h2>

    <div class="col-xs-4">
        <p>Drag</p>
        <img src="AW16/pages/AW16_Lookbook_Timeoutmessage_03_02_new.gif?$staticlink$" alt="Hit List" height="85" width="80">
    </div>
    <div class="col-xs-4 middle-col">
        <p>or</p>
    </div>
    <div class="col-xs-4">
        <p>Use arrow</p>
        <img src="AW16/pages/AW16_Lookbook_Timeoutmessage_05_02_new.gif?$staticlink$" alt="Hit List" height="85" width="123">
    </div>
    <a class="close-btn-new">CLOSE</a>

</div>

<script type="text/javascript">
$(document).ready(function(){

// function to show our popups
function showPopup(whichpopup){
 if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
$('.overlay-bg').show(); //display your popup background and set     height  to   the page height
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}
}

// function to close our popups
function closePopup(){
$('.overlay-bg').hide(); //hide the overlay
}


// hide popup when user clicks on close button or if user clicks     anywhere outside the container
$('.close-btn-new, .overlay-bg').click(function(){
closePopup();
});


});
</script>

Answer 1

Try the following

<script type="text/javascript">
$(document).ready(function(){

// function to show our popups
function showPopup(whichpopup){
    if (typeof(localStorage.popupDisplayCount) == "undefined") {
        localStorage.popupDisplayCount = 1;
        $('.overlay-bg').show(); //display your popup background and set     height to   the page height
    }
}

// function to close our popups
function closePopup(){
$('.overlay-bg').hide(); //hide the overlay
}


// hide popup when user clicks on close button or if user clicks     anywhere outside the container
$('.close-btn-new, .overlay-bg').click(function(){
closePopup();
});


});
</script>

Answer 2

By clicking off the page, I am assuming you mean after refreshing the page you don't want it to show again. To do this, you are going to need to track user state across pages refreshes. You'll either need to store the information that a user has seen the page in a database or in something like a cookie that is persistent when the page refreshes.

You can find the code to set the site to do something only once on the Mozilla MDN site:

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

code from mozilla site: 

function doOnce() {
  if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    alert("Do something here!");
    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
  }
}

EDIT: I created a gist with a working example. https://gist.github.com/kemiller2002/658e69a899e874e01026ba05f83f7454