CODEWITHSUNDEEP
jqueryhtml
user2421594
user2421594

Reputation: 81

Element to only show once using jquery cookie seesion

I have a piece of html and js code that displays a modal box. It's on all pages of my site. What I will like to do is to only show this div element once per session..So when users navigate to other pages they don't see the popup anymore..But if they close the browser and re-open it the popup should show again, etc..

Here is my code

<div class="popup">
   <div>
      <a class="close">Close link</a>
      <h1 style="color: #fdc114;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolores architecto, totam, asperiores delectus minus ipsam quo. Sapiente, voluptas suscipit repellat quis, quod, modi dolores deserunt sunt animi eum quidem.     
     </h1>
    <h1 style="color: #fdc114;">Let's transform together.</h1>
   </div>
</div>



<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.close').click(function() { 
    jQuery('.popup').addClass('none');
  });
});
</script>

Upvotes: 0

Views: 134

Answers (1)

atmd
atmd

Reputation: 7490

For that you'd want to use sessionStorage not a cookie. It persists while the window is open, so will remain while you navigate the site, but it is destroyed when you close the browser.

usage:

sessionStorage.setItem(key, value); // set values
sessionStorage.getItem(key); //get values

So you'd set a value once the modal has been shown, then check for the existence of this value before trying to show the modal again, if the value is set then don't show it, something like:

var modalShown = sessionStorage.getItem('shown');

if(!modalShown){
    // showModel
    sessionStorage.setItem('shown', true);
}

n.b. you could do it with a cookie, but sessionStorage has a lot of the features you want built in.

Upvotes: 1

Related Questions