Download button click with popup ads and countdown | Countdown Timer before Download Button

Download button click with popup countdown timer and ads

01.CSS= </head> Post above

<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: &#39;&#39;; 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>

02.HTML = Post Page

<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">

----------------ads Code ----------------

</div>

<div class="download-pop">

        <a class="button" href="#" id="at-downloadx">Download File</a>

  

    </div>

    </div>

     

  </div>

</div>

03.JS = </body>  Post above

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

 

Newer post Older post

ads1

পরিচিতদেরকে জানাতে শেয়ার করুন

ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।

ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

ডোমেইন চেকার এই লিংকে চাপ দিন ।

আপনার জন্য আরো কিছু পোস্ট