使模态框在 Tab Session 中只出现一次

Question

我创建的模态框出现问题。

让我先把所有的代码放在前面。

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>

我想在用户第一次打开网站时向用户显示一个模式框。我不希望它再次出现，即使他刷新页面或操纵它。我只希望它在用户打开新标签并访问我的网站时出现。

在HTML和CSS代码中，我认为没有任何问题。

在 JavaScript 中，我使用了 SessionStorage（因为在这种情况下它比本地存储更相关），我将一个键作为“ModalSeen”，它有 2 个值：“Seen”& “没有见过”。最后，我放置了一个if条件：如果值为Seen，模态框不应再次出现。如果值为 Not Seen，则模态可以再次出现。

我尝试了很多东西，但这是我能做的最好的了。

您能否通过在整个选项卡会话中仅打开一次模式来帮助我实现此目的？提前致谢！

Answer 1

我认为您可能需要为此使用 cookie

使模态框在 Tab Session 中只出现一次

Make the Modal Box Appear only Once in Tab Session

html

javascript

css

modal-dialog

display