Question

我创建了一个窗口，当您向下滚动并向您显示订阅新闻稿的表单时，该窗口会显示。我按了一个按钮关闭它（fadeOut()），如果你向下或向上滚动，就不会重新出现。

但我想在网站的任何部分暂时不再出现。也许使用cookies，我看过插件jquery-cookie，但我不确定如何实现我的代码。

这是我的代码：

<div class="conteiner">

  <div class="newspop">
    <button type="button" class="close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4><i class="fa fa-newspaper-o"></i> <strong>WE KEEP YOU INFORMED</strong></h4>
    Subscribe to our daily newsletter.
    <!-- Form -->

  </div>
</div>

JS：

$(window).scroll(function() {    
  'use strict';
  var scroll = $(window).scrollTop();

  if (scroll >= 500) {
    $(".newspop").addClass("popin");

    $(".newspop button.close").on('click', function() {
      $(".newspop").fadeOut();
    });
  } else {
    $(".newspop").removeClass("popin");
  }

});

您可以在jsFiddle

中看到它正常工作

Answer 1

您可以使用window.localStorage ...

我在这里修改了你的小提琴https://jsfiddle.net/bau3fk15/1/

$(window).scroll(function() {    
  'use strict';
  var scroll = $(window).scrollTop();

  if (scroll >= 500 && !window.localStorage.getItem('isClosed')) {
    $(".newspop").addClass("popin");

    $(".newspop button.close").on('click', function() {
      $(".newspop").fadeOut();
      window.localStorage.setItem('isClosed', 'true');
    });
  } else {
    $(".newspop").removeClass("popin");
  }

});

如果你想要它的时间，那么我建议使用cookies。你甚至不需要使用jquery。你可以使用document.cookie

function setClosedCookie(days) {
    var d = new Date();
    d.setTime(d.getTime() + (days*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = "isClosed = true;" + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}


$(window).scroll(function() {    
  'use strict';
  var scroll = $(window).scrollTop();
  var isWindowClosed = getCookie('isClosed');

  if (scroll >= 500 && !isWindowClosed) {
    $(".newspop").addClass("popin");

    $(".newspop button.close").on('click', function() {
      $(".newspop").fadeOut();
      setClosedCookie(1);
    });
  } else {
    $(".newspop").removeClass("popin");
  }



});

退房 https://jsfiddle.net/6Ldt5fs6/1/

当然，天数可以改为小时，分钟等......

如果用户已关闭，请勿显示窗口

1 个答案: