javascript - jQuery:修改了带有过期 cookie 的弹出窗口，破坏了 cookie，但是在哪里？

Question

所以我一直在用过期的 cookie 编辑这个 jQuery/html/javascript 弹出窗口，这样它就不会一直弹出。问题是，它几乎完美地工作，除了我的版本不会设置 cookie，因此它不会在一天 (1) 后弹出。我试过重新排列、重新编辑代码(删除整理)以及我能想到的一切。我猜这是我添加的延迟，但我不知道它们是否会干扰。感谢任何帮助。

原文:https://www.sitepoint.com/community/t/overlay-pop-up-box-on-page-load/113885/15

$(".close").on("click", function(e) {
  e.preventDefault();
  $("#popup, #overlay").hide();
  $.cookie("popup", "displayed", {
    expires: 1
  });
  // Process subscription here
});

setTimeout(function() {
  $("#popup,#overlay").fadeIn(500).show();
  $("#popup,#overlay").delay(17000).fadeOut(500);
}, 1000);

var hasSeenSignUpDialogie = $.cookie('popup');
if (!hasSeenSignUpDialogie) {
  $("<div>", {
    id: "overlay"
  }).insertBefore("#popup");
  $("#popup").show();
}
$("#behindbar").on("click", function() {
  $.removeCookie('popup');
});

#overlay {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1000;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

.donatebuttonred {
  cursor: pointer;
  color: #fff;
  font: normal 20px 'Open Sans';
  font-weight: bold;
  border-radius: 0px;
  background: rgba(210, 0, 0, 1);
  width: 175px;
  padding: 5px 5px 10px 5px !important;
  height: 20px;
  position: relative;
  top: 0%;
  margin: 47px 0px 0px 0px !important;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  box-shadow: 0px 5px 5px 0px #aaa;
  text-align: center;
  border: 1px solid #700;
}

#popup .close {
  cursor: pointer;
  color: #fff;
  font: normal 20px 'Open Sans';
  font-weight: bold;
  float: right;
  margin: 4px 5px 0px 0px;
  border-radius: 5px;
  background: #c00;
  width: 20px;
  padding: 1px 0px 8px 8px;
  height: 20px;
}

#popup {
  font: normal 14px 'Open Sans';
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-width: 260px;
  max-width: 500px;
  min-height: 200px;
  max-height: 335px;
  padding: 0px 0px 0px 0px;
  border: 10px solid rgba(210, 0, 0, 1);
  background-color: white;
  z-index: 1001;
  overflow: auto;
}

#popup p {
  font: normal 18px 'Open Sans';
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 0px 0px;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  
<div id="popup">
    <div class="close" href="">X</div>
    <p>We're new, under funded and looking to expand with your help. <br><br>Please consider donating a small one time or reoccurring amount of your choice, it will make a difference. <br><br> We offer teir <b><u>rewards</u></b> based on the amount donated,
      you can donate <b><u>via paypal or amazon</u></b>. Checkout our Donate page for more.</p>
    <p class="donatebuttonred" href=""><b>Donate</b> &amp; <b>Rewards</b></p>

  </div>

我的:https://codepen.io/zachreynolds/pen/NXZKeV

注意:在 CodePen 中测试代码，当使用刷新进行编辑时，cookie 不会保留在原始版本中。必须在您自己拥有的网站/页面上进行测试，或者在页面刷新时保存 cookie 的东西上进行测试。

Answer 1

  $(".close").on("click", function(e) {
      e.preventDefault();
    $("#popup, #overlay").hide();
    $.cookie("popup", "displayed", { expires: 1 });

    // Process subscription here
  }); 

var hasSeenSignUpDialogie = $.cookie('popup');
  if(!hasSeenSignUpDialogie){
    $("<div>",{ id : "overlay" }).insertBefore("#popup");
    setTimeout(
     function() 
      {
        $("#overlay").fadeIn(1000).show();
       $("#popup").fadeIn(1000).show();
      }, 2500);} 
 $("#behindbar").on("click", function(){
  $.removeCookie('popup');  
 });