jQuery: Modified popup with expiring cookie, breaks cookie, but where?

Question

So I've been editing this jQuery/html/javascript popup with expiring cookie so it doesn't keep popping up. The thing is, it works nearly perfectly, except my version won't set the cookie so it doesn't popup after a day(1). I've tried rearranging, re-editing the code(removing tidying up), and everything I could think of. I'm guessing it's the delays i've added, but I don't know how it is if they are interfering. Appreciate any help.

Original: 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>

Mine: https://codepen.io/zachreynolds/pen/NXZKeV

Note: testing the code in CodePen, when editing with a refresh, the cookie doesn't stay with original version. Must test on a owned site/page of your own, or something that holds a cookie when the page refreshes.

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');  
 });