0

I am creating a JavaScript popup. The code is as below.

The Issue:

The script below works fine, but I need to make the popUp to appear only once on my page. i.e, when the user closes the popup, it should not appear until the user restarts the browser or clears his cache/cookie.

I know there are similar questions but I couldn't find an answer that was using the same script I'm using so I apologize in advance. Please help!

$(document).ready(function() {
  $("#popup").hide().fadeIn(1000);
  $("#close").on("click", function(e) {
    e.preventDefault();
    $("#popup").fadeOut(1000);
  });
});
#popup {
  display: none;
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px 2px #000;
}
body {
  background: url('http://i.imgur.com/kO2Ffje.png?1') center top;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="popup" class="popup panel panel-primary">
  <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">
  <div class="panel-footer">
    <button id="close" class="btn btn-lg btn-primary">Close button</button>
  </div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Sanctum
  • 1
  • Just use a cookie - What scripts did you find and reject? The duplicate I found is using something almost identical to what you use – mplungjan Dec 05 '15 at 06:33
  • Here's the updated link: http://jsfiddle.net/rxLdsv32/1/ – Sanctum Dec 05 '15 at 06:35
  • @mplungjan here is the script I found and couldn't use -- https://stackoverflow.com/questions/26131542/how-do-i-make-an-image-automatically-popup-on-my-main-page-when-someone-goes-to. Can you share the one you've found? – Sanctum Dec 05 '15 at 06:36
  • http://jsfiddle.net/mplungjan/gpkv6uu6/ `if ($.cookie("seen") != "yes") { $("#popup").hide().fadeIn(1000); $.cookie("seen","yes"); }` - please note the external cookie script – mplungjan Dec 05 '15 at 06:39
  • "Didn't work" ? did you include the [cookie script](https://github.com/js-cookie/js-cookie) – mplungjan Dec 05 '15 at 06:42
  • @mplungjan I included the cookie script and the popup is no longer showing up. It's also not showing here -- jsfiddle.net/mplungjan/gpkv6uu6. I'm I missing something? Thanks for your help! – Sanctum Dec 05 '15 at 06:48
  • It was JSFiddle that did not want to include the raw github. I [changed the fiddle](http://jsfiddle.net/mplungjan/gpkv6uu6/) to use https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js and to include a seen=no button – mplungjan Dec 05 '15 at 07:29
  • Thank you @mplungjan. I'm not sure if the script is causing this but the pop up is now randomly appearing on other pages even though I only want it to show on the home page once in a single session. Is there a way to modify the code to do that? – Sanctum Dec 05 '15 at 19:48
  • Add `,{ path: '/' }` after "yes" – mplungjan Dec 05 '15 at 19:51
  • 1
    Great! I was able to figure it out. I appreciate your time @mplungjan – Sanctum Dec 06 '15 at 03:05

0 Answers0