为什么页面重新加载时弹出

Question

我正在使用 jQuery 计时器。当计时器为 00d 00h 00m 00d 时，计时器到期并且弹出窗口即将到来，它们都可以正常工作。问题是计时器已过期，但重新加载页面时弹出窗口再次显示。我可以把计时器放在印度标准时间。我要求您在您的代码片段中检查它以清楚地理解问题。

下面是我的代码：

    // 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>

Answer 1

从逻辑上讲，你的代码是非常正确的。您只需要检查以下任一条件：

如果您知道需要向访问您网站的每个用户显示弹出窗口多长时间，请检查特定日期的条件，如果未结束则显示模态，否则不显示模态。 (首选方式)
如果你想直接关闭弹出窗口而不检查超过弹出窗口的到期日期，那么将标志添加到localStorage，每次页面加载时，首先检查localStorage中的标志然后应用条件。

为什么页面重新加载时弹出

Why popup coming when page reload

javascript

jquery

timer