Блог

Главная - Вопросы по программированию - Сделайте так, чтобы Модальное поле Появлялось только один раз в Сеансе Вкладки

Сделайте так, чтобы Модальное поле Появлялось только один раз в Сеансе Вкладки

#javascript #html #css #modal-dialog #display

Вопрос:

Я столкнулся с проблемой с модальным полем, которое я создал.

Позвольте мне сначала изложить весь код в первую очередь.

 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">amp;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 значения: «Видно» и «Не видно». В конце концов, я поставил условие if: если значение видно, модальное поле больше не должно появляться. Если значение не отображается, модальное значение может появиться снова.

Я много чего перепробовал, но это было лучшее, что я мог сделать.

Не могли бы вы, пожалуйста, помочь мне достичь этого, сделав модальный режим открытым только один раз за весь сеанс вкладки? заранее спасибо!

Ответ №1:

Я думаю, что для этого вам может потребоваться использовать файлы cookie

Метки: ,