Question

我有一个“播放”按钮，可以打开带有嵌入式视频的模态。用户关闭模式后，我想在6秒钟后显示一个按钮，显示“声明”。

HTML：

func applicationDidEnterBackground(_ application: UIApplication) {
    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.

    print(UIPasteboard.general.string!) //here it works perfectly and prints the string correctly

    for _ in 0...5 {
       print(UIPasteboard.general.string!) //here it returns nil 
    }

}

CSS：

<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>

Javascript：

.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;
 }

一切正常，直到我关闭视频模式；所述“权利要求”按钮将不会出现。

我尝试放弃超时，只是正常执行该功能，但仍然无法正常工作。我不知道问题是什么，所以我不知道还能尝试什么。

Answer 1

我认为您的问题源于以下事实：它CSS仍然覆盖了className，其样式仍然为display:none，请尝试删除{{1 }}，当您想要显示它并在隐藏时将其添加回去：

className

因此，您将像这样更改功能：

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

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

请注意，您的CSS中有此标签

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");
     }
}

模态关闭后的显示按钮

1 个答案: