Display a popout only once per user

Question

There have already been answers to this question but I am still unsure exactly how it works.

Here is my code:

Here is my JavaScript:

   <!--PopupScript-->
    <script>
      // you can use just jquery for this
      $(document).ready(function(){
         $('#overlay-back').fadeIn(500,function(){
            $('#popup').show();
         });

         $(".close-image").on('click', function() {
            $('#popup').hide();
            $('#overlay-back').fadeOut(500);
         });
      });
   </script>

Here is the HTML:

     <!--Popup Content-->
    <div class="container-fluid">
    <div id="overlay-back"></div>
    <div id="popup">
    <img src="Assets/images/Deep_Close.png" class="close-image" />
    <form name="Mail_list" action="save.php" method="post">
    <h4>Subscription</h4>
    <br/>
        <div class="form-group">
          <label for="first_name">First Name: </label>
          <input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required />
        </div>
        <div class="form-group">
          <label for="last_name">Last Name: </label>
          <input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name"  required />
        </div>
         <div class="form-group">
          <label for="email">User Email: </label>
          <input type="text" name="email" id="email" size="25" placeholder="Email"  required />
        </div>
        <br/><br/>
        <input type="submit" value="Submit Form">
        <input type="reset" value="Reset Form">         
      </form>
</div>
</div>

This solution works great for what I need it for. The problem is that I do not want the popup to show every time someone navigates to the home page, I want the popup to show only once per user or session. I know this can be achieved by using 'cookies', but I do not know exactly how to incorporate it into the JavaScript above.

Any help would be greatly appreciated. Thank you.

`cookies` / `localstaroge` / `sessionstorage` are your friends :) — Andrew Evt, Apr 27 '16 at 17:33
google is always my go to place, i could not find examples of what i was looking for, as i stated in the question, "There have already been answers to this question but I am still unsure exactly how it works." @ zzzzBov — User051593, Apr 27 '16 at 17:39

score 0 · Answer 1 · answered Apr 27 '16 at 17:34

0

You can use localStorage.

Example:

    $('#overlay-back').fadeIn(500,function(){
        if (localStorage.popupShown !== "true") {
          $('#popup').show();
          localStorage.popupShown = "true";
        }
     });

answered Apr 27 '16 at 17:34

Jakub Rożek

2,110
11
12

score 0 · Answer 2 · answered Apr 27 '16 at 17:37

you can try

$(document).ready(function(){
         if (sessionStorage.count==0) {
         $('#overlay-back').fadeIn(500,function(){
            $('#popup').show();
            sessionStorage.count = 1;
         });
         }

         $(".close-image").on('click', function() {
            $('#popup').hide();
            $('#overlay-back').fadeOut(500);
         });
      });

Display a popout only once per user

2 Answers2