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

Answer 2

在这种情况下，你应该在点击时看到加载程序图像并使用超时功能在3秒后执行弹出打开功能。

一个小例子：

var timeout;

function startLoader(){
  document.getElementById('loader').className = '';
	timeout = setTimeout(openPopup, 3000);
  return false;
}

function openPopup() {
  document.getElementById('light').style.display = 'block';
  document.getElementById('loader').className = 'hidden';
  clearTimeout(timeout);
}

function closePopup() {
  document.getElementById('light').style.display = 'none';
  clearTimeout(timeout);
  return false;
}

.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;
}

.hidden {
  display: none
}

#loader {
  background: url(http://www.pointoffshore.com/SiteAssets/loading.gif) no-repeat center center;
  height: 50px;
  width: 50px;
}

<a href="#" onclick="startLoader()">
  <div class="btn">Win!</div>
  <div id="loader" class="hidden"> </div>
  </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="#" onclick="closePopup()">close</a>
</div>

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

2 个答案: