使用 cookie 每天显示一次弹出窗口

Question

我正在尝试使用 cookie 每天显示一次弹出窗口，但它不起作用。这是 html、css 和 js：

function showpopup() {

  var id = '#dialog';
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("slow", 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(2000);
  $('.window .close').click(function(e) {
    e.preventDefault();
    $('#mask').hide();
    $('.window').hide();
  });
  $('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
  });

}
$(function() {
  if ($.cookie('alreadyShow') === null) {
    $.cookie('alreadyShow', true, {
      expires: 1
    });
    showpopup();
  }
});

#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #26262c;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 850px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#boxes #dialog {
  width: 450px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  font-size: 15pt;
}

.agree:hover {
  background-color: #D1D1D1;
}

.popupoption:hover {
  background-color: #D1D1D1;
  color: green;
}

.popupoption2:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://lab.alexcican.com/set_cookies/cookie.js"></script>
<div id="boxes">
  <div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
    <div id="san">
      <a href="#" class="close agree">
        <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png" width="25" style="float:right; margin-right: -10px; margin-top: -10px;" alt="" />
      </a>
      <br><br> Visit our new website: <a style="color:blue" target="_blank" href="www.example.come">Example.com</a>.
    </div>
  </div>
  <div id="mask"> </div>
</div>

Answer 1

您的问题是以下情况：

if ($.cookie('alreadyShow') === null)

当 cookie 未设置时，$.cookie() 返回undefined。
也许您想在undefined 和null 之间使用read about the difference。

接下来的任何语句都会起作用：

if ($.cookie('alreadyShow') === undefined)
if ($.cookie('alreadyShow') == null)
if (!$.cookie('alreadyShow'))

另外，您正在使用 js-cookie 库的 old version (v1.4.0)。它的作者在删除 jQuery 依赖项后将代码移至new project。您应该考虑升级并指出正确的CDN。

请注意，新项目使用的语义略有不同。您的代码如下所示：

if (!Cookies.get('alreadyShow')) {
  Cookies.set('alreadyShow', true, {
    expires: 1
  });
  showpopup();
}