一旦使用cookie在jQuery中关闭,不显示弹出窗口

问题描述 投票:2回答:1

我使用以下代码表示关闭后不显示弹出窗口。我尝试了以下代码,但无法正常工作。我在Google上检查过,但没有找到解决方法。

您能帮我解决问题吗?

$(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个回答
0
投票

[是,最后我找到了解决方案,在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>
© www.soinside.com 2019 - 2024. All rights reserved.