@Valeria17

Как запретить PopUP окну всплывать?

Добрый вечер, у меня есть следующий вопрос. Есть popup окно, написанное на html css js, оно работает стабильно, но не хватает одного момента. Когда человек нажимает на кнопку согласится и получает доступ к магазину, по возвращении на homepage данное окно снова всплывает.

Вопрос следующий, что нужно изменить в коде, чтобы, (если он нажал согласится!)даже если человек перезагрузил сайт данное окно ему больше не показывалось в данной сессии

const popup = document.getElementById('popup'); 
const allowButton = document.getElementById('allowButton'); 
const denyButton = document.getElementById('denyButton'); 
window.onload = function() { 
popup.style.display = 'block'; 
} 

denyButton.onclick = function() { 
popup.style.display = 'none'; 
window.location.href = 'https://www.google.com/'; 
} 
allowButton.onclick = function() { 
popup.style.display = 'none'; }


<div id="popup">
        <div class="popup-content">
            <div class="popup-contents">
            <div class="section-heading">הריני להצהיר שאני מעל גיל</div>
            <div class="section-text">+18</div>
            <div class="buttons">
                <button id="allowButton">מאשר</button>
                <button id="denyButton">לא מאשר</button>
            </div>
        </div>
        </div>
    </div>


#popup {
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#000000d1;
}

.popup-content {
    position:absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%,20%);
    background-color:white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 50%;
}
.popup-contents {
    border: 3px solid #c4b69d;
    padding: 16px;
}

.section-heading {
    font-size: 24px;
    margin-bottom: 10px;
}

.section-text {
    font-size: 100px;
    margin: 15px auto;
    font-weight: bold;
    color: #c4b69d;
}

.buttons {
    margin-top: 20px;

}

button {
    padding: 10px 20px;
    background-color: #00693E;
    color: white;
    border: none;
    cursor: pointer;
}

#denyButton {
    background-color: grey;
}

@media (max-width:430px){
  .popup-content {
    top: 9%;
    padding: 11px;
    width: 81%;
}
}
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae Куратор тега JavaScript
Тлен
window.onload = function() { 
  if(sessionStorage.allow) return;
  popup.style.display = 'block'; 
} 

allowButton.onclick = function() { 
  popup.style.display = 'none'; 
  sessionStorage.allow = true;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы