Question

我用简报形式创建了这个弹出窗口，它将显示滚动的一半屏幕并且点击X将不再显示。

如果有人再次打开页面，我是否有机会“告诉”jquery在“X”关闭后一周内不显示此div？

https://www.centuryparklawgroup.com/popup-dev/

这是一段代码：

<script src="https://www.centuryparklawgroup.com/wp-content/themes/lawyers-attorneys-child/jquery1.11.3.js"></script>
<script>
  function checkShowDiv() {
  var top = $(window).scrollTop();
  if ($(window).scrollTop()  > $(window).height() / 2) {    
  $('.nslttppup:hidden').fadeIn('slow'); //prevent re-fades with :hidden
 }
else {
  $('.nslttppup').hide();
  }
}
$(window).scroll(checkShowDiv);
</script>

<script>
  $(document).ready(function() {
  $('.closeform').click(function() {
  $(window).unbind('scroll', checkShowDiv);
  $(this).closest('.nslttppup').hide('fast');
  return false;
  });
});
</script>

Answer 1

您可以使用Cookie或本地存储，例如下面的示例我点击关闭时只设置了cookie，这样3分钟后就不会显示滚动（你可以按天数或日期设置时间到期）

在这里，我通过阅读cookie设置变量showPopup，如果它存在并设置为“不”。所以你的弹出窗口不会显示在滚动

上

所以你的代码应该是这样的（由于stackoverflow片段安全，我们不能在这里做一个片段请参阅Fiddle对于整个代码）

这是Fiddle（在此示例中，Cookie在3分钟后过期）我也使用jquery cookie plugin

var showPopup = true;

function checkShowDiv() {
  var top = $(window).scrollTop();
  if(showPopup) {
    if ($(window).scrollTop() > $(window).height() / 2) {
      $('.nslttppup').fadeIn('slow');
    } else {
      $('.nslttppup').hide();
    }
  }
}


$(document).ready(function() {
  showCookieExist();
  $(window).scroll(checkShowDiv);
  $('.closeform').click(function() {
    $(window).unbind('scroll', checkShowDiv);
    $(this).closest('.nslttppup').hide('fast');
    $.cookie('showpopup','no');
    showPopup = false;
    return false;
  });
});

function showCookieExist() {
  console.log($.cookie('showpopup'));
  return $.cookie('showpopup');
}

Jquery - 关闭后一周内不显示div（弹出窗口）

1 个答案: