отображать всплывающее окно один раз в день, используя куки

Question

Я пытаюсь отображать всплывающее окно один раз в день, используя куки, но это не работает.Вот 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.

Независимо от того, какие из следующих утверждений будут работать:

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

Кроме того, вы используете очень старую версию (v1.4.0) библиотеки js-cookie .Его автор переместил код в новый проект после удаления зависимости jQuery.Вы должны рассмотреть возможность обновления и указать на правильный CDN .

Обратите внимание, что новый проект использует немного другую семантику.Ваш код будет выглядеть следующим образом:

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