模态关闭后显示按钮答案

【问题标题】：Display button after modal is closed模态关闭后显示按钮
【发布时间】：2019-02-01 17:40:59
【问题描述】：

我有一个“播放”按钮，可以打开一个带有嵌入视频的模式。用户关闭模态框后，我想在 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";
}
}

在我关闭视频模式之前一切正常；没有出现“索赔”按钮。

我试过放弃超时，只是正常执行功能，但还是不行。我不知道问题是什么，所以我不知道还能尝试什么。

【问题讨论】：

标签： javascript html css modal-dialog bootstrap-modal

【解决方案1】：

我相信你的问题源于它有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;
}

【讨论】：