Нажмите кнопку, введите всплывающее окно, затем измените текст всплывающего окна

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 = ''; 
 
\t 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>