簡體   English   中英

如何在 jQuery 中使用 cookie 顯示彈出窗口?

[英]How to show a pop-up using cookies in jQuery?

我想顯示三天的彈出窗口,一天不超過 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>

這是一個開始,使用js-cookieJavaScript 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;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM