如何在 jQuery 中使用 cookie 显示弹出窗口？

Question

我想显示三天的弹出窗口，一天不超过 3 次。 我怎么能做到这一点？

HTML 模态弹出窗口

<div id="popup1" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
       <div class="modal-content homeaz_popup">
         <div class="modal-body">
            <div class="banner_bg">
                <a class="popup-banner" href="/landing.html">
                    <img class="banner_img" src="https://homeaz.vn/templates/themes/images/popupgheda.gif" alt="">
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

这是一个开始，使用js-cookie和JavaScript Date 对象。

jsFiddle 链接

基本上它：

• 获取客户时间
• 检查是否第一次访问该网站
• 如果第一次访问，它会在 3 天后设置一个最终到期日期时间 cookie
• 并将过期的 cookie 设置为 false
• 它不是第一次访问，它检查客户端时间是否大于最终过期 cookie 时间
• 如果是，它会删除所有 cookie 并将过期的 cookie 设置为 true
• 如果不是，它会根据一天中的时间检查早上、下午和晚上的 cookie
• 如果这是一天中特定时间的第一次访问，它将显示一个弹出窗口
• 并根据一天中的时间更改问候语，例如：

不是很优雅或简洁，但希望表现得足够好让你做出一些东西。

测试的时候，如果想查看所有已经设置好的cookies，可以使用：

Cookies.get();

要删除 cookie，您可以使用：

Cookies.remove("cookie_name_here");

上午、下午和晚上的定义为：

0400 to 1200  
1200 to 1700  
1700 to 0400  

但您可以随心所欲地更改它们。

javascript

// get current time of client  
var client_time_now = new Date();
var client_time_now_hour = client_time_now.getHours();

console.log("client_time_now: " + client_time_now);
console.log("client_time_now_hour: " + client_time_now_hour);

// see if client has already visited the site  
var final_expiry_date_time = Cookies.get("final_expiry_date_time");

// if first visit  
if (final_expiry_date_time === undefined) {

  console.log("this is your first visit");

  // set the expiry date 3 days from now
  // see:  https://stackoverflow.com/a/56728401  
  var final_expiry_date_time_value = new Date(Date.now() + (3600 * 1000 * 72));
  // to test expiry works, uncomment below
  // var final_expiry_date_time_value = new Date();

  console.log("final_expiry_date_time_value: " + final_expiry_date_time_value);

  Cookies.set("final_expiry_date_time", final_expiry_date_time_value);

  var expired = "false";

  Cookies.set("expired", expired);

}
// if not first visit, check if 3 days has elapsed since first visit
else {

  console.log("this is not your first visit");

  // is current datetime greater than expiry datetime
  // see:  https://stackoverflow.com/a/493018  
  var expired = client_time_now.getTime() > new Date(Cookies.get("final_expiry_date_time")).getTime();

  // for consistency, cookies are stored as strings  
  expired = expired.toString();

  console.log("expired: " + expired);

  // if expired, remove cookies and set expired to true 
  if (expired === "true") {
    Cookies.set("expired", "true");
    Cookies.remove("morning");
    Cookies.remove("afternoon");
    Cookies.remove("night");
  } else {
    Cookies.set("expired", "false");
  }

}

if (expired === "false") {

  // see if visits have been completed during these times
  var already_visited_morning = Cookies.get("morning");
  var already_visited_afternoon = Cookies.get("afternoon");
  var already_visited_night = Cookies.get("night");

  // morning handling - 4am to 12pm
  if (client_time_now_hour > 3 && client_time_now_hour <= 11) {
    var day_segment = "morning";

    if (already_visited_morning === "true") {
      console.log("you've already visited this morning");
    } else {
      Cookies.set("morning", "true");
      // show your popup
      $("#modal_bg").show();
      // adjust greeting text depending on time of day
      $("#greeting").text("good morning");
    }

  }
  // afternoon handling - 12pm to 5pm  
  else if (client_time_now_hour > 11 && client_time_now_hour <= 16) {
    var day_segment = "afternoon";

    if (already_visited_afternoon === "true") {
      console.log("you've already visited this afternoon");
    } else {
      Cookies.set("afternoon", "true");
      // show your popup
      $("#modal_bg").show();
      // adjust greeting text depending on time of day
      $("#greeting").text("good afternoon");
    }

  }
  // night handling - 5pm to 4am
  else if (client_time_now_hour > 16 && client_time_now_hour <= 23 || client_time_now_hour >= 0 && client_time_now_hour <= 3) {
    var day_segment = "night";

    if (already_visited_night === "true") {
      console.log("you've already visited this night");
    } else {
      Cookies.set("night", "true");
      // show your popup
      $("#modal_bg").show();
      // adjust greeting text depending on time of day
      $("#greeting").text("good evening");
    }


  }


  console.log("it's " + day_segment);

  console.log("all cookies: ");

  console.log(JSON.stringify(Cookies.get(), null, 4));

}

// hide the modal on clicking close button
$(document).on("click", ".close_button", function() {
  $("#modal_bg").hide();
});

html

<div id="modal_bg">
  <div class="modal_content">
    <img src="http://lorempixel.com/400/200/abstract/">
    <div id="greeting"></div>
    <div class="close_button">X</div>
  </div>
</div>
<p>
  here is some content.
</p>

css

#modal_bg {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  position: absolute;
}

.modal_content {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 400px;
  position: relative;
  padding: 20px;
  background: #fff;
}

.close_button {
  background: #dcdcdc;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 20px;
  font-family: arial;
  font-weight: bold;
}

.close_button:hover {
  cursor: pointer;
}

#greeting {
  background: #fff;
  position: absolute;
  bottom: 40px;
  padding: 2px 10px;
  font-family: arial;
  margin-left: 10px;
  right: 40px;
}