Html Question posted in
Some basic documentation can be found here.

Html – clicking JS popup close button refreshes page and displays popup again

I want the page to show popup when its loaded or refreshed. Upon clicking close button, popup should disappear and show me the page below. However, my code refreshes the page and displays popup again when I click close. How can I Fix this?

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved! --

    I used jquery to hide the popup, removed local storage and used prevent default function to solve the issue

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


  2. 0

    Add button attribute ‘type="button"’ or you can also used ‘e.preventDefault()’ to stop page refresh.

    <button type="button">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search