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

Question

I want to show a pop up for three days, no more than three times a day. How could I achieve that?

HTML modal pop-up

<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

Here is a start, using js-cookie and JavaScript Date object .

jsFiddle link

Basically it:

• gets client time
• checks if first ever visit to the site
• if first visit, it sets a final expiration datetime cookie 3 days from now
• and also sets expired cookie to false
• it not first visit, it checks if client time is greater than final expiration cookie time
• if it is, it removes all cookies and sets expired cookie to true
• if it's not, it checks for morning, afternoon and night cookies depending on the hour of the day
• if it is the first visit at a particular part of the day, it will show a popup
• and also change greeting text depending on time of day, eg:

Not very elegant or concise, but hopefully demonstrated well enough for you to make something.

When testing, if you want to view all cookies that have been set, you can use:

Cookies.get();

and to remove cookies, you can use:

Cookies.remove("cookie_name_here");

morning, afternoon and night are defined as:

0400 to 1200  
1200 to 1700  
1700 to 0400  

but you can change them as you like.

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