------------------------------</head>------------------------
<style>
#at-downloadx{position: relative;display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #ffffff; color: #00991f; font-size: 15px; border-radius: 9px; text-transform: capitalize; border: 1px solid #005414!important; margin-top: 1px;} .adpop-top{height: 40px; width: 100%; border-bottom: 1px #E5E5E5 solid;} .btn-at{display: block; height: 50px; color: #fff!important; font-size: 18px;border-radius: 25px; text-transform: uppercase; background: #04AA6D;text-align:center; line-height: 50px;width: 200px; margin: 12px auto; transition: all 0.4s ease-in;} [data-ml-modal] { position:fixed; top:0; bottom:0; left:0; right:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:999; width:0; height:0; opacity:0; } [data-ml-modal]:target { width:auto; height:auto; opacity:1; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; } [data-ml-modal]:target .modal-overlay { position:fixed; top:0; bottom:0; left:0; right:0; cursor:pointer; background-color:#000; background-color:rgb(247 255 160 / 21%); z-index:1; } [data-ml-modal] .modal-dialog { border-radius:6px; box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); position:relative; width: 90%; max-width:660px; max-height:70%; margin:10% auto; overflow-x:hidden; overflow-y:auto; z-index:2; } [data-ml-modal] .modal-content {background:#ffffffcf; padding:23px 27px;} @media (max-width:767px) { [data-ml-modal] .modal-dialog {margin:20% auto;} }
.at-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
</style>
-------------------------------</body>-------------------------------------
<script>
//<![CDATA[
var downloadButton = document.getElementById("at-downloadx"); var counter = 40; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 40 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.... "; } }, 1500); }; var clickbtn = document.getElementById("btn-at"); clickbtn.onclick = startDownload;
//]]>
</script>
-----------------------------------------------post html-----------------------------
<p><a class="btn-at" href="#AT-downloadPop" id="btn-at">Download</a></p>
<div data-ml-modal="" id="AT-downloadPop">
<div class="modal-overlay"></div>
<div class="modal-dialog">
<div class="modal-content center">
<div class="adpop-top">
<h3 style="margin: 0px;"><span style="color: red;">Click on Download Please Wait After Time is Over</span></h3>
<div class="at-pop__close" onclick="document.getElementById("AT-downloadPop").style.display="none""><svg style="height: 25px; width: 25px;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
</div>
<br />
<div style="width: 460px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5394955726848487"
data-ad-slot="5727095169"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<br />
<a class="button" href="#" id="at-downloadx" target="_blank">Download File</a>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------
