تركيب زرتحميل بشكل منبثق و بعداد أضافة أكواد أعلانات أدسنس

/ يمكن أضافة أكواد أعلانات أدسنس / مع زر التحميل

شرح التركيب

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

.tg-pop__bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } 

.tg-pop { display: none; } 

.tg-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%; } 

.tg-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } 

.tg-pop__close:after, .tg-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; } 

.tg-pop__close:hover:after, .tg-pop__close:hover:before { background: #aaa; } 

.tg-pop__close:before { transform: rotate(-45deg); } @media screen and (max-width: 768px) { .tg-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;}

#tg-downloadx{display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #005af0; color: #fff; 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;background: #e9e9e9;font-size: 24px; padding: 20px;text-align: center;position: relative;} 

.btn-at{display: block; height: 50px; color: #fff; font-size: 24px;text-transform: uppercase; background: #005af0;text-align:center; line-height: 50px;width: 200px; margin: 150px auto; transition: all 0.4s ease-in;}

.adpop-top h2{margin:0}

</style>

  <script>

//<![CDATA[

const modal = document.querySelector("#my-modal"); const btn = document.querySelectorAll(".btn-at"); const closeModal = document.getElementsByClassName("tg-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("tg-downloadx"); var counter = 10; var newElement = document.createElement("span"); newElement.innerHTML = "أنتظــر قليــلا 10 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 = "أنتظــر قليــلا" + " " + counter.toString() + " " + " ثوانــي .... "; } }, 1000); }; var clickbtn = document.getElementById("btn-at"); clickbtn.onclick = startDownload;

//]]>

</script>

التغيرات

التغيرات