I need help to solve clause screen for a website onload

Question

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.

Js

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 class="main__disclaimer js-disclaimer">
  <div class="main__disclaimer-content">
    <h2 class="main__disclaimer-title1">
      Disclaimer
    </h2>
    <h2 class="main__disclaimer-title">
      Disclaimer Content.
    </h2>
    <button class="main__disclaimer-button js-close-disclaimer">
      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;
}

I tried a super simple search for "*show only first visit*", and found many answers here already, did you try that? As you can imagine it is a pretty common problem, it makes sense it will have been asked, and solved, many times already ... https://stackoverflow.com/q/24768067/6089612, https://stackoverflow.com/q/69079632/6089612, https://stackoverflow.com/q/44071426/6089612, https://stackoverflow.com/q/56788954/6089612, https://stackoverflow.com/q/18750354/6089612, https://stackoverflow.com/q/69063966/6089612, https://stackoverflow.com/q/46181159/6089612 ... — Don't Panic, Jul 21 '22 at 06:02

brobers · Answer 1 · 2022-07-21T05:35:15.210

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.

score 0 · Answer 2 · answered Jul 21 '22 at 05:28

0

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.

answered Jul 21 '22 at 05:28

A Haworth

30,908
4
11
14

Thank you for helping me solve this issue. – Srinidhi Marimuthu Jul 22 '22 at 08:15

I need help to solve clause screen for a website onload

2 Answers2