------------------------------------------Download button click with popup countdown timer and ads-------------------
----------------------CSS--------------
<style>
.modal {display: none;position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: rgba(0,0,0, .9); transition: opacity .25s ease;z-index:999; } .at-pop__bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } .at-pop { display: none; } .at-pop__inner { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; width: 50%; margin: auto; overflow: auto; background: #fff; border-radius: 5px; padding: 1em 2em; height: 50%; } .at-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } .at-pop__close:after, .at-pop__close:before { content: ''; position: absolute; width: 2px; height: 1.5em; background: #333; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } .at-pop__close:hover:after, .at-pop__close:hover:before { background: #aaa; } .at-pop__close:before { transform: rotate(-45deg); } @media screen and (max-width: 768px) { .at-pop__inner { width: 90%; box-sizing: border-box; } } .adpop-top{height: 40px; width: 100%; border-bottom: 1px #E5E5E5 solid;} .adhtml{margin: 14px 0 4px; min-height: 260px;}.adpop-content{height: 330px;}#at-downloadx{display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #f3f2f2; color: #000; font-size: 15px; border-radius: 8px; text-transform: capitalize; border: 1px solid #212121!important; margin-top: 1px;}.download-pop{line-height: 16px; margin: 5px 0 5px;font-size: 14px;position: relative;} .btn-at{display: block; height: 50px; color: #fff; font-size: 24px;text-transform: uppercase; background: #f3a;text-align:center; line-height: 50px;width: 200px; margin: 150px auto; transition: all 0.4s ease-in;}.adpop-top h2{margin:0}
</style>
------------------------------HTML------------------------------
<div class="btn-at" id="btn-at">Download</div>
<div class="modal" id='my-modal'>
<div class="at-pop__bg"></div>
<div class="at-pop__inner">
<div class="adpop-top">
<label class="at-pop__close at-btnclose"></label>
<h2 style="margin: 0px;">Download Your file</h2>
</div><div class="adpop-content">
<div class="adhtml">
<ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="8671274899" data-full-width-responsive="true" style="display: block;"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="download-pop">
<a class="button" href="#" id="at-downloadx">Download File</a>
</div>
</div>
</div>
</div>
--------------------------JS------------------
<script>
//<![CDATA[
const modal = document.querySelector("#my-modal"); const btn = document.querySelectorAll(".btn-at"); const closeModal = document.getElementsByClassName("at-btnclose")[0]; for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function () { modal.style.display = "block"; }); } btn.onclick = function () { modal.style.display = "block"; }; closeModal.onclick = function () { modal.style.display = "none"; }; window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } };
var downloadButton = document.getElementById("at-downloadx"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("btn-at"); clickbtn.onclick = startDownload;
//]]>
</script>