javascript - 按下按钮，出现加载弹出窗口，然后更改弹出文本

Question

我有一个按钮，当有人点击它时，我希望弹出一个框(我已经实现了)，但在弹出之前我想要某种带有文本的加载圆圈，并且在 3 后弹出秒。

这可能吗？

当前代码:

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class="btn">Win!</div>
</a>
<div id="light" class="white_content">Congratulations, you've won!<br>Claim your prize now by completing a short survey:<br>
<input type="submit" value="Complete Survey" onclick="location.href='http://mobverify.com/cl.php?id=5c78fd59851bf0c4867c008c9882d808'"> 
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a>
</div>

弹出窗口的样式:

.white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 150%;
        padding: 16px;
        border: 2px solid white;
        background-color: #2e3141;
        z-index:1002;
        overflow: auto;
        text-align: center;
        color: white;
        border-radius: 30px;
    }

Answer 1

只需将以下 CSS 添加到您的代码中即可。 CSS:-

.btn {
   width: 316px;
   height: 316px;
}
.btn:active{  background:url(http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif) no-repeat; 
}