使用 cookie 在 jQuery 中关闭后不显示弹出窗口答案

【问题标题】：Not to show popup once closed in jQuery using cookies使用 cookie 在 jQuery 中关闭后不显示弹出窗口
【发布时间】：2020-03-19 23:04:53
【问题描述】：

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

你能帮我解决一下吗？

$(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>

【问题讨论】：

标签： javascript jquery html jquery-cookie

【解决方案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>

【讨论】：