CODEWITHSUNDEEP
jquerypopuplocal-storage
Harikris
Harikris

Reputation: 310

How to show pop up dialog only for first visit?

I have created one pop-up div on my web page. I wanted to show it only on the first load, but not for any other page load.

Below is the JS code and the HTML. I tried many ways like localstorage and cookies, but failed.

$(document).ready(function() {
  var id = '#dialog';
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("fast", 0.9);
  var winH = $(window).height();
  var winW = $(window).width();
  $(id).css('top', winH / 2 - $(id).height() / 2);
  $(id).css('left', winW / 2 - $(id).width() / 2);
  $(id).fadeIn(1000);
  $('.window #close').click(function(e) {
    e.preventDefault();
    $('#mask').hide();
    $('.window').hide();
  });
  $('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
  });
});
<div id="boxes">
  <div style= "display:none;" id="dialog" class="window">
   <div id="close"><a href="#" class="close agree"><i class="fa fa-power-off"></i></a></div>
   <div id="lorem"><div><img src="<?=base_url()?>front/images/mobile_pop_bg.png"   alt="get ealaniah mobile app" title="get mobile app" ></div></div>
  </div>
  <div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>

Upvotes: 0

Views: 3668

Answers (2)

Rino Raj
Rino Raj

Reputation: 6264

jQuery(window).load(function() {
  if (sessionStorage.getItem('dontLoad') == null))
    // code to show popup
    sessionStorage.setItem('dontLoad', 'true');
  }
});

The sessionStorage property allows you to access a session Storage object. 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. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

FIDDLE DEMO

Upvotes: 1

gh9
gh9

Reputation: 10703

var Foo = function(){

     var hasShownLocalStorageName = 'bob';
     this.HasShown = function() {
          localStorage.getItem(hasShownLocalStorageName) || false
     };
     this.SetShown = functioN(){
          localStorage.setItem(hasShownLocalStorageName ,true);
     };

}

usage

if (Foo.HasShown())
{
//do popuplogic
Foo.SetShown()
}

With the caveat that the user can reset your localstorage anytime. But the same basic principle applies if you use a cookie.

Upvotes: 1

Related Questions