[ Updated V2.6 ] Download Button Click With Popup Ads And Countdown

Hello friends, welcome to the Droidnur123 tech blog. So today in this amazing article, we will know about the [ Updated V2.6 ] Download Button Click With Popup Ads And Countdown. By the way, for your information, Advance Download Button Script is available. But this article is different. So keep reading this post till the last.

By the way, I have made some download timer scripts available earlier also Cheak it out. But the code that I had provided in those scripts. It used to show the download button only after the Countdown Timer was over. But now there are many friends who need advanced countdown and popup ads download button scripts.

That means in that script, after clicking on the Download Button, the popup timer will show them and then the Download button should show again. That is when I click on Download Button then Start people like HTML, CSS, JavaScript-like Countdown Timer.

how to add in your post 

Who adds Download Button Click With Popup Ads And Countdown, you can install the js code below before </head> in your template.

step 1 adding javascript

<script type='text/javascript'>
//<![CDATA[
/*
 Download button click with popup ads and countdown V2.6 | ANUTRICKZ | https://www.youtube.com/c/AnuTrickz
*/
$("#Dbtn").click(function(){var e,n=document.getElementById("at-download"),t=document.getElementById("Dbtn"),a=(document.getElementById("at-download").href,31),l=document.createElement("span");n.parentNode.replaceChild(l,n),e=setInterval(function(){--a<0?(l.parentNode.replaceChild(n,l),clearInterval(e),n.style.display="block"):(l.innerHTML=" Please wait while your url is generating.. "+a.toString()+" ",t.style.display="none")},1e3)}),$(document).ready(function(){$(".trigger").click(function(){return $(".modal-wrapper").toggleClass("open"),$(".page-wrapper").toggleClass("blur"),!1})});
//]]>
</script>

step 2 adding CSS

<style type='text/css'>
    /* [ Updated version (V2.6) Released by Anutrickz] */
 @media screen and (max-width:600px){.modal{width:300px!important;line-height:20px!important}}@media screen and (max-width:420px){.modal{width:200px!important;line-height:20px}} #at-download span{text-align: center;margin: 20px 0;width:100%} p.adhtml{display: inline-block; margin: 4px 0 4px; min-height: 290px;} .blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .page-wrapper{ width:100%; height:100%; } a.btn{ width: 150px; display: block; margin: 0 auto; padding: 1em 0; position: relative; font: 1.125em 'Arial', sans-serif; font-weight: 700; text-align: center; text-decoration: none; color: #fff; border-radius: 5px; background: rgba(217,67,86,1); } .modal-wrapper{ width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(011,011,011,0.75); visibility:hidden; opacity:0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; z-index:9999; } .modal-wrapper.open{ opacity:1; visibility:visible; } .modal{ position:relative;top:50%;left:50%;padding:20px;display:flex;background:#fff;flex-direction:column;width:80%;max-width:500px;line-height:30px;border-radius:5px;transform: translate(-50% , -50%) scale(0.97);overflow:hidden;box-sizing:border-box opacity:0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .modal-wrapper.open .modal{ opacity:1; } .head{ overflow: hidden; text-align: center; height: 40px; font-size: 17px; font-weight: 700; border-bottom: 1px #E5E5E5 solid;} .content{ padding:5%; }#at-download{display: inline-block; height: 37px; line-height: 30px; width: 100%; 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;text-decoration:none;}#at-download{line-height: 36px; }.content,#at-download span{text-align:center; color:green}
</style>

step 3 adding HTML in your Post

<!-- [ Updated version (V2.6) Released by Droidnur123]-->
<div class="page-wrapper">
  <a class="btn trigger" id="Dbtn" href="javascript:;">Download</a>
</div>
<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      &#10515; Download file
         </div>
    <div class="content">
      <p class='adhtml'>
      ========= ads here=================
      </p><br/>
      <a id="at-download" href="linkdownload" style="display:none">Download file</a>
    </div>
  </div>
</div>

Okay, that's its Download Button Click With Popup Ads And Countdown

Droidnur123 for the post. Hopefully useful visit again.

Go to Link