Popup show one time only

Question

I have set session, and whant to display popup only once when user enters site, But my popup is displaying all time, Below is my code -

<?php 
 Mage::getSingleton('core/session')->setWall('1');
$wall = Mage::getSingleton('core/session')->getWall();
if($wall =='1'){ ?>
<script>
jQuery(document).ready(function() {
   jQuery('#earn-reward-box').show();
   //jQuery('#earn-reward-box').delay(000).fadeOut();
    });
</script>
 <div id="earn-reward-box-main" style="display:block">
<div id="earn-reward-box" class="xmus-box">
<div id="earn-reward-close">&nbsp;</div>
<a href="<?php echo Mage::getBaseUrl()?>christmas">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);?>wysiwyg/deal.png" />
</a>
</div>
<div id="earn-reward-overlay">&nbsp;</div>
</div><script>
    jQuery('#earn-reward-close').click(function(){
        jQuery('#earn-reward-box-main').toggle();
    });
jQuery('#earn-reward-close').click(function(){
        jQuery('#earn-reward-overlay').toggle();
    });
</script>  
<?php
Mage::getSingleton('core/session')->setWall('1'); 

} 
Mage::getSingleton('core/session')->unsWall(); 

?>

Answer 1

Set session variable as "display:block" once it shows up and is closed change it to "display:none" and set it at style="here is the session variable".

Answer 2

you could make it show for every new session by saving to the sessionStorage like this

    jQuery(document).ready(function() {
      if(window.sessionStorage.getItem('shown') === true ){
         jQuery('#earn-reward-box').show();
       }
    });

And you can set your item to true when the user clicks on the overlay

 jQuery('#earn-reward-close').click(function(){
          window.sessionStorage.setItem('shown', true);
         jQuery('#earn-reward-box-main').toggle();
     });

Answer 3

Seeing from MVC, you need a Model(or State) stored somewhere to tell if the popup has shown already or not. For example you can use localStorage as the place to store this information:

localStorage.setItem('popup-shown', 'true');

And the next time you open this page, since localStorage remains, you can tell if it has been shown already or not:

localStorage.getItem('popup-shown') === 'true'

Then you can control the behaviors of you popup as you need.

sessionStorage might be also fine, but take care of this quote:

sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends.

https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage