CODEWITHSUNDEEP
htmljquerycss
briannelson95
briannelson95

Reputation: 37

How to get a popup to show up after 3 seconds but once per user using css and jquery?

I'm new to using jQuery and am having trouble figuring out how to show a popup using css only once per user. I got the popup to work so that it shows up every time, I just need to only happen once per user.

My HTML Code

<div id="popUpMain" style="display: none;">
    <div id="popup">
      <h1 id="newsHeading">Join</h1>
      <a href="#linkHere" target="_blank"><button class="buttonNews">More Info</button></a>
      <button class="buttonNews">No Thanks</button>
    </div>
  </div>

The script handling the jQuery

<script>
  $(document).ready(function(){
      setTimeout(function(){
      $('#popUpMain').css('display', 'block'); }, 3000);
  });

  $('.buttonNews').click(function(){
    $('#popUpMain').css('display', 'none')
  });
</script>

Thanks in advance.

Upvotes: 1

Views: 925

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337733

To achieve this you need to keep track of whether or not the user has been shown the popup before. The simplest way of doing this is by using localStorage to manage a boolean flag, something like this:

$(document).ready(function() {
  if (!localStorage.getItem('popupPreviouslyShown') || false) {
    setTimeout(function() {
      $('#popUpMain').css('display', 'block');
      localStorage.setItem('popupPreviouslyShown', true);
    }, 3000);
  }
});

Working example

Upvotes: 1

Related Questions