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中的数据在页面会话结束时被清除。只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。在新选项卡或窗口中打开页面将导致启动新会话，这与会话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，则适用相同的基本原则。

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

2 个答案: