0

I am facing a problem with the modal box that I created.

Let me first put all of the code first.

var modal = document.getElementById("modal");
var close = document.getElementsByClassName("modal-close")[0];

if (modal.style.display == "block") {
  sessionStorage.setItem("ModalSeen", "Seen")
}

if (window.performance) {
  console.log("Window Performance works fine.")
}

if (performance.getEntriesByType('navigation')[0].type != 'navigate') { // Reload Happened
  modal.style.display = "none";
  sessionStorage.setItem("ModalSeen", "Seen");
} else {
  modal.style.display = "block";
  sessionStorage.setItem("ModalSeen", "Not Seen");
}

close.onclick = function() {
  modal.style.display = "none";
  sessionStorage.setItem("ModalSeen", "Seen");
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    sessionStorage.setItem("ModalSeen", "Seen");
  }
}

if (sessionStorage.getItem("ModalSeen") == "Seen") {
  modal.style.display = "none";
} else if (sessionStorage.getItem("ModalSeen") == "Not Seen") {
  modal.style.display = "block";
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 13px;
  width: 33%;
}

.modal-close {
  color: #aaaaaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-img {
  width: 20%;
  display: block;
  margin-left: 41%;
}

.modal-heading {
  font-family: Noto Sans KR, sans-serif;
  font-size: xx-large;
  font-weight: bold;
  color: #363636;
  margin-left: 36.3%;
}

.modal-txt {
  font-family: Noto Sans KR, sans-serif;
  font-size: 17px;
  color: #363636;
  text-align: center;
  width: 85%;
  margin-left: 7.5%;
}
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="modal-close">&times;</span>
    <img class="modal-img" src="icons/Country - Error.png">
    <p class="modal-heading">Warning</p>
    <p class="modal-txt">Hey! This doesn't work outside of India.</p>
    <p class="modal-txt">If you are outside India, you can continue to use the website, but you can't install the app.</p>
  </div>
</div>

I want to display a modal box to the user when the user first opens the website. I don't want it to appear ever again, even if he refreshes the page or manipulates it. I only want it to appear when the user opens a new tab and goes to my website.

In the HTML and CSS code, I don't believe there is anything wrong with it.

In JavaScript, I have used SessionStorage (because that is more relevant than local storage in this case) and I put a key as "ModalSeen" and there are 2 values for it: "Seen" & "Not Seen". In the end, I have placed an if condition: If the value is Seen, the modal box should not appear again. If the value is Not Seen, the modal can appear again.

I tried a lot of things, but this was the best I could do.

Can you please help me to achieve this by making the modal open only once in the whole tab session? Thanks in Advance!

Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34

1 Answers1

0

I think that you might need to use cookies for that