Alert Box - должен скрываться только при нажатии на (x) - PullRequest
Новая
       18

Alert Box - должен скрываться только при нажатии на (x)

1 голос
/ 01 июля 2019

У меня есть простой код для окна предупреждения. После нажатия только (x) должен скрыться элемент.

iusse: Проблема в том, что я могу щелкнуть в любом месте веб-сайта, после чего элемент автоматически скрывается. Я хотел бы, чтобы элемент был скрыт только при нажатии на (x). 

document.addEventListener("DOMContentLoaded", function() {
   let dismissed = sessionStorage.getItem("dismissed");
   let alertDiv = document.getElementById("promo");
   let dismissButton = document.getElementById("dismiss");
   if(!dismissed){
     alertDiv.classList.remove("hide");
   }

  addEventListener("click", function(){
    alertDiv.classList.add("hide");
    sessionStorage.setItem("dismissed", true);
  });
});
/* The alert PROMO box */
.promo {
  padding: 10px;
  background-color: #415ca2; /* Blue */
  color: white;
  margin-bottom: 7px;
}
.hide {
display: none;
}

/* The close button */
.closebtnpr {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 18px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtnpr:hover {
  color: black;
}
<div class="promo hide" id="promo"> 
  <span class="closebtnpr" id="dismiss">x</span>
  <center>
    <b>U.S. POLO ASSN. DAY!</b><br />
  </center>
</div>

Обновление: 

document.addEventListener("DOMContentLoaded", function() {
   let dismissed = sessionStorage.getItem("dismissed");
   let alertDiv = document.getElementById("promo");
   let dismissButton.addEventListener("click", function(){
    alertDiv.classList.add("hide");
    sessionStorage.setItem("dismissed", true);
  });
});

1 Ответ

2 голосов
/ 01 июля 2019 
let dismissed = sessionStorage.getItem("dismissed");
let dismissButton = document.getElementById("dismiss");
let alertDiv = document.getElementById("promo");

if(!dismissed){
    alertDiv.classList.remove("hide");
}

dismissButton.addEventListener("click", function(){
    alertDiv.classList.add("hide");
    sessionStorage.setItem("dismissed", true);
});

Вы храните переменную сеанса, поэтому ваш ящик не будет отображаться после щелчка по полю, пока эта переменная сеанса не будет удалена.

...