如何仅在首次访问时显示弹出对话框？

Question

我在我的网页上创建了一个弹出窗口 div。我只想在第一次加载时显示它，而不是在任何其他页面加载时显示它。

下面是JS代码和HTML。我尝试了很多方法，比如localstorage和cookies，但是都失败了。

$(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>

Answer 1

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

sessionStorage 属性允许您访问会话存储对象。 sessionStorage 与 Window.localStorage 类似，唯一的区别是 localStorage 中存储的数据没有设置过期时间，sessionStorage 中存储的数据会在页面会话结束时被清除。只要浏览器打开，页面会话就会持续，并在页面重新加载和恢复后继续存在。在新选项卡或 window 中打开页面将导致启动新会话，这与会话 cookie 的工作方式不同。

FIDDLE DEMO

Answer 2

var Foo = function(){

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

}

用法

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

请注意，用户可以随时重置您的本地存储。但如果您使用 cookie，同样的基本原则也适用。

如何仅在首次访问时显示弹出对话框？

How to show pop up dialog only for first visit?

jquery

popup

local-storage