I need help to solve clause screen for a website onload-CodePudding

I'm working on a project where my client needs a disclaimer screen as soon as the page loads. actually, I achieved the screen but the problem is every time I come to the home page from other pages the disclaimer appears. I don't want it in that way! it should appear only once as soon as the page gets loaded. I'm sharing the part of the code below. Kindly help me to achieve it.

I really appreciate any help you can provide.

document.body.onload = () => {
  window.scrollTo(0, 0);
  const close = document.querySelector(".js-close-disclaimer");
  close.onclick = () => {
    document.querySelector(".js-disclaimer").classList.add("fade");
    document.body.style.overflow = "auto";
    document.querySelector(".js-main").classList.remove("blurred");
    document.querySelector(".js-hero").classList.remove("blurred");
  };
};

This My HTML I Included In Index.Html

<div >
  <div >
    <h2 >
      Disclaimer
    </h2>
    <h2 >
      Disclaimer Content.
    </h2>
    <button >
      Accept
    </button>
  </div>
</div>

This is my CSS

.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}

.main__container {
  width: 48%;
  height: 400px;
  margin-bottom: 1rem;
}

.main__container.black {
  background-color: rgba(0, 0, 0, 0.5);
}

.main__container.white {
  background-color: rgba(255, 255, 255, 0.5);
}

.main__disclaimer {
  display: flex;
  position: fixed;
  top: 0%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.799);
  z-index: 999999999;
}

.main__disclaimer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50rem;
  max-width: 100%;
  padding: 2rem;
  text-align: justify;
  background-color: #05213ad4;
}

.main__disclaimer-title1 {
  font-family: "Raleway-Medium";
  color: #EAC17A;
  line-height: 62px;
  font-size: 2rem;
}

.main__disclaimer-title {
  font-family: "Raleway-Medium";
  color: #ffffff;
  line-height: 32px;
  font-size: 1.1rem;
}

.main__disclaimer-button {
  padding: 0.5rem 2rem;
  background-color: #EAC17A;
  background-size: 200% auto;
  color: #ffffff;
  border: 0;
  font-family: "Raleway-Medium";
  font-size: 1.1rem;
  margin-top: 2%;
  text-transform: capitalize;
  cursor: pointer;
}

.main__disclaimer-button:hover {
  transform: scale(1.1, 1.1);
}

.main__disclaimer-button:focus {
  outline: 0;
}

.blurred {
  filter: blur(15px);
}

.fade {
  transform: scale(0);
  transition: 0.4s;
}

.fade:not(.show) {
  z-index: -1;
}

CodePudding user response：

You could use document.referrerto see whether the page has been entered from another page on the same site or not.

If it has then stop the display of the disclaimer immediately.

CodePudding user response：

One way you could do this:

For each link that sends you back to the home page other than your main entry point, add in a query string flag such as ?nopopup to the end of the link.

<a href="filename.html?nopopup">Go to filename</a>

When Go to filename is clicked, filename.html is loaded with the query string "?nopopup" appended to the filename in the address bar.

Back on the home page, add some logic to detect this extra string. To get the query string into variables, use:

var queryString = location.search.substring(1);

The variable queryString now has the value "nopopup". Then you can add a condition to only load the popup when this is not the case.