点击JS弹窗关闭按钮刷新页面并再次显示弹窗

Question

我希望页面在加载或刷新时显示弹出窗口。单击关闭按钮后，弹出窗口应该消失并显示下面的页面。但是，当我单击关闭时，我的代码会刷新页面并再次显示弹出窗口。我该如何解决这个问题？

var popupDisplayed = "false" // localStorage.getItem("popupDisplayed");
window.addEventListener("load", function() {
  if (popupDisplayed !== "true") {
    var popupOverlay = document.getElementById('popup-overlay');
    var popupGreeting = document.getElementById('popup-greeting');

    popupOverlay.style.display = 'none';
    popupGreeting.style.display = 'none';

    setTimeout(function() {
      popupOverlay.style.display = 'block';
      popupGreeting.style.display = 'block';
    }, 1000); // Reduced the delay to 1 second for demonstration purposes

    //localStorage.setItem("popupDisplayed", "true");
  }
});

document.querySelector("#closeButton").addEventListener("click", function() {
  var popupOverlay = document.getElementById('popup-overlay');
  var popupGreeting = document.getElementById('popup-greeting');

  popupOverlay.style.display = 'none';
  popupGreeting.style.display = 'none';

  popupOverlay.style.opacity = '0';
  popupGreeting.style.opacity = '0';
});

#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#popup-greeting {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

<div id="popup-overlay"></div>
<div id="popup-greeting">
  <button id="closeButton">Close</button>
</div>

Answer 1

我使用jquery隐藏弹出窗口，删除本地存储并使用阻止默认功能来解决问题

<script type="text/javascript">

  window.addEventListener("load", function(){
    
    var popupOverlay = document.getElementById('popup-overlay');
    var popupGreeting = document.getElementById('popup-greeting'); 
    var closeButton = document.getElementById('closeButton');

    popupOverlay.style.display = 'block';
    popupGreeting.style.display = 'block';
    
    document.querySelector("#closeButton").addEventListener("click", function(){    
       
       
        event.preventDefault();
        
        $("#popup-overlay").hide("slow");
        $("#popup-greeting").hide("slow");
        $("#closeButton").hide("slow");     
 }
 
 );
 
 });
</script>

Answer 2

添加按钮属性 'type="button"' 或者您也可以使用 'e.preventDefault()' 来停止页面刷新。

<button type="button">