javascript - 使用 cookies 在 jQuery 中关闭后不显示弹出窗口

Question

我使用下面的代码，以便在关闭后不显示弹出窗口。我尝试了下面的代码，但它不起作用。我查了谷歌但没有找到解决方案。

你能帮我解决一下吗？

$(document).ready(function() {
  $('.closeme').click(function() {
    $('#popup').hide();
    if ($.cookie('whenToShowDialog') == null) {
      // Create expiring cookie, 2 days from now:
      $.cookie('whenToShowDialog', 'yes', {
        expires: 2,
        path: '/'
      });
      // Show dialog
      $('#popup').show();
    }

  });
});

#popup {
  background-color: #f8f8f8;
  padding: 20px;
  width: 400px;
  position: relative;
}

#popup h2 {
  font-size: 25px;
}

.closeme {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<div id="popup">
  <div class="closeme"><i class="far fa-window-close"></i></div>
  <h2>Test popup</h2>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Answer 1

是的，终于找到了解决方案，我在CSS中将display: none设置为#popup。

首先，它会检查 cookie 是否确实可用。如果没有，它将显示弹出窗口，一旦您关闭弹出窗口，它会将 cookie 设置为一天。

$(document).ready(function() {
  if ($.cookie('whenToShowDialog') != "true") {
    $("#popup").show();
    $(".closeme").click(function() {
      $("#popup").hide();
      // set the cookie for 24 hours
      var date = new Date();
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
      $.cookie('whenToShowDialog', "true", {
        expires: date
      });
    });
  }
});

#popup {
  background-color: #f8f8f8;
  padding: 20px;
  width: 400px;
  position: relative;
  display: none;
}

#popup h2 {
  font-size: 25px;
}

.closeme {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<div id="popup">
  <div class="closeme"><i class="far fa-window-close"></i></div>
  <h2>Test popup</h2>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>