CODEWITHSUNDEEP
javascriptjquerytimer
Faheem azaz Bhanej
Faheem azaz Bhanej

Reputation: 2396

Why popup coming when page reload

I am working with jQuery timer. When timer is 00d 00h 00m 00d then timer is expire and popup is coming they all work perfect. Problem is timer is expired but when reload the page popup show again. I can put timer on indian standard time. I request you to check it in your code snippet for understand problem clearly.

Here down is my code:

    // Set the date we're counting down to
var countDownDate = new Date("feb 16, 2022 24:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    $("#timer").remove();
    $("#modalContent").addClass("show");
  }
  
  $("#close").click(function(){
    $("#modalContent").removeClass("show");
  });
}, 1000);
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

.show
{
    display: block !important;
}

.modal-content {
  display: none;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myModal" class="modal">
    <div id="timer">
        <p id="demo"></p>
    </div>
    
    <div class="modal-content" id="modalContent">
      <span class="close" id="close">&times;</span>
      <p>Some text in the Modal..</p>
    </div>
</div>

Upvotes: 1

Views: 418

Answers (1)

Mohammed
Mohammed

Reputation: 658

Logically, your code is very correct. Just you need to check either of one condition from below:

  1. If you know for how long you need to show popup to every user who visit your website then check the condition that particular date if not over then show the modal else dont show the modal. (Preferred way)
  2. If you directly want to close the popup without checking above expiration date of popup, then add the flag to localStorage and every time when page loads, first check the flag from localStorage then apply condition for that.

Upvotes: 1

Related Questions