user3767554 user3767554 - 3 months ago 12
Javascript Question

Pop up on page load only to load once per user

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

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

Comments