Is it possible to create a popup that open automatically after 10 sec of delay-CodePudding

I want to create a popup that shows after 10 sec delay after customer land of product page and if they click outside popup should get closed

Here is my html and css. Can you help me with the JS?

  css -.overlay_flight_traveldil {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
}

.overlay_flight_traveldil:target {
  visibility: visible;
  opacity: 100;
  z-index: 5;
}

.popup_flight_travlDil {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  transition: all 2s ease-in-out;
  z-index: 5;
}

.popup_flight_travlDil .close_flight_travelDl {
  position: absolute;
  top: 25px;
  right: 20px;
  transition: all 200ms;
  font-size: 80px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

.popup_flight_travlDil .content_flightht_travel_dil {
  max-height: 60%;
  overflow: auto;
}

@media screen and (min-width: 480px) {
  .popup_flight_travlDil {
    width: 33%;
    z-index: 5;
  }
}

@media screen and (max-width: 480px) {
  .popup_flight_travlDil {
    width: 90%;
    z-index: 5;
  }

<div id="popup_flight_travlDil3" >
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
    <a  href="#">&times;</a>
    <div >
    </div>
  </div>
</div>

CodePudding user response：

Start with the div hidden

Then check what is clicked

I changed the X to a button since there is no need to make it a link. It is not going anywhere. And your framework registers it as a navigation so the back button is affected

window.addEventListener("DOMContentLoaded", () => {
  const pop = document.getElementById("popup_flight_travlDil3");
  setTimeout(() => pop.hidden = false, 1000); // show after 1 second - change to 10000 to get 10 secs
  document.addEventListener("click", (e) => { // what did you click?
    const tgt = e.target;
    if (tgt.matches(".close_flight_travelDl") || // the close button 
      !e.target.closest(".popup_flight_travlDil")) { // or something else not the advert
      pop.hidden = true;
    }
  })
})

  css -.overlay_flight_traveldil {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
}

.overlay_flight_traveldil:target {
  visibility: visible;
  opacity: 100;
  z-index: 5;
}

.popup_flight_travlDil {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  transition: all 2s ease-in-out;
  z-index: 5;
}

.popup_flight_travlDil .close_flight_travelDl {
  position: absolute;
  top: 25px;
  right: 20px;
  transition: all 200ms;
  font-size: 80px;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

.popup_flight_travlDil .content_flightht_travel_dil {
  max-height: 60%;
  overflow: auto;
}

@media screen and (min-width: 480px) {
  .popup_flight_travlDil {
    width: 33%;
    z-index: 5;
  }
}

@media screen and (max-width: 480px) {
  .popup_flight_travlDil {
    width: 90%;
    z-index: 5;
  }

<div id="popup_flight_travlDil3"  hidden>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
    <button type="button" >&times;</button>
    <div >
    </div>
  </div>
</div>

CodePudding user response：

setting timeout for 10 seconds & adding class of .popup which is defined in css with visiblity:visible & opacity:1 & adding click event on close Button and if user clicks it removes the .popup class making it hidden again

setTimeout(function() {
  document.querySelector(".overlay_flight_traveldil").classList.add("popup");
}, 10000);

let closebtn = document.querySelector(".close_flight_travelDl");

closebtn.addEventListener("click", (event) => {

  document.querySelector(".overlay_flight_traveldil").classList.remove("popup");

})

  .overlay_flight_traveldil {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  animation: popup 2s 1;
}

.popup {
  visibility: visible;
  opacity: 1
}

.overlay_flight_traveldil:target {
  visibility: visible;
  opacity: 100;
  z-index: 5;
}

.popup_flight_travlDil {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  transition: all 2s ease-in-out;
  z-index: 5;
}

.popup_flight_travlDil .close_flight_travelDl {
  position: absolute;
  top: 25px;
  right: 20px;
  transition: all 200ms;
  font-size: 80px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

.popup_flight_travlDil .content_flightht_travel_dil {
  max-height: 60%;
  overflow: auto;
}

@media screen and (min-width: 480px) {
  .popup_flight_travlDil {
    width: 33%;
    z-index: 5;
  }
}

@media screen and (max-width: 480px) {
  .popup_flight_travlDil {
    width: 90%;
    z-index: 5;
  }

<div id="popup_flight_travlDil3" >
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
    <a  href="#">&times;</a>
    <div >
    </div>
  </div>
</div>

CodePudding user response：

You can do that just by making the popup invisible by adding the following lines

 .popup_flight_travlDil {
      visibility: hidden;
      opacity: 0;
}

And then, you would need some JavaScript to make the popup visible after 10 seconds. For that,

const showPopup = () => {
  const popup = document.getElementsByClassName("popup_flight_travlDil")[0];
  popup.style.opacity = 1;
  popup.style.visibility = "visible";
};

setTimeout(showPopup, 10000);

Here, the function showPopup finds the div that was made invisible by using CSS, and then makes it visible. Whereas, the line setTimeout(showPopup, 10000); calls the showPopup function after 10 seconds. Note that the setTimeout function takes 2 parameters, the function to call and time interval(in milliseconds) to wait before calling that function.