Кнопка отображения после закрытия модальной зоны - PullRequest
Новая
       8

Кнопка отображения после закрытия модальной зоны

0 голосов
/ 01 февраля 2019

У меня есть кнопка воспроизведения, которая открывает модал со встроенным видео.После того, как пользователь закрывает модальное окно, я хочу отобразить кнопку с надписью «претензия» через 6 секунд.

HTML: 

<a id="video-popup"><img src="images/playbutton.png"></a>
<div id="modal_video" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/O_GQbO7Tthg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

<button id="claim" class="claim">Claim</button></div>

CSS: 

.modal_video {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #ffffff;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
font-family: 'Rubik', sans-serif;
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

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

.claim {
display: none;
}

.modal-content iframe{
 margin: 0 auto;
 display: block;
 }

Javascript: 

function showClaimButton() {
var x = document.getElementById("claim");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

var v_modal = document.getElementById('modal_video');
var v_btn = document.getElementById('video-popup');
v_btn.onclick = function() {
v_modal.style.display = "block";
}
span.onclick = function() {
v_modal.style.display = "none";
setTimeout(showClaimButton(), 6000);
}
window.onclick = function(event) {
if(event.target == v_modal) {
v_modal.style.display = "none";
}
}

Все работает до тех пор, пока я не закрою видео-модал;кнопка «утверждение» не появляется.

Я пытался отменить тайм-аут и просто выполнить функцию нормально, но она все равно не работает.Я понятия не имею, в чем проблема, поэтому я не знаю, что еще попробовать.

1 Ответ

0 голосов
/ 01 февраля 2019

Я полагаю, что ваша проблема связана с тем, что она имеет CSS, переопределяющую ее, поскольку она по-прежнему прикреплена к className, а стили display:none, попробуйте просто удалить className, когда вы хотите показать ееи добавьте его обратно, когда хотите его скрыть: 

//Remove class to show
document.getElementById("claim").classList.remove("claim");

//Add class to hide
document.getElementById("claim").classList.add("claim");

Таким образом, вы бы изменили свою функцию следующим образом: 

function showClaimButton() {
     var x = document.getElementById("claim");
     if (x.classList.contains("claim");) {
           //Remove class to show
           x.classList.remove("claim");
     } else {
           //Add class to hide
           x.classList.add("claim");
     }
}

Обратите внимание, что у вас есть это в вашем CSS: 

.claim {
   display: none;
}
...