Download Botton Popup Ads With Timer using HTML, CSS, JS 2023

 
  @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: 0 auto
  }

  .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;
    background: #01bce5;
    text-align: center;
    padding: 13px 0;
    font-size: 25px;
    color: #fff;
  }

  .content {
    padding: 5%;
  }

<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">
      Download file
         </div>
    <div class="content">
      <p class='adhtml'>

      (Ad Code Here 300*250)  

      </p><br/>
      <a id="at-download" href="download link" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download file</a>
    </div>
  </div>
</div>

 //<![CDATA[
  $('#Dbtn').click(function () { var linkDL = document.getElementById("at-download"), btn = document.getElementById("Dbtn"), direklink = document.getElementById("at-download").href, time = 30; var at_down = document.createElement("span"); linkDL.parentNode.replaceChild(at_down, linkDL); var id; id = setInterval(function () { time--; if (time < 0) { at_down.parentNode.replaceChild(linkDL, at_down); clearInterval(id); window.location.replace(direklink); linkDL.style.display = "block"; } else { at_down.innerHTML = " " + "" + time.toString() + " Second...."; btn.style.display = "none"; } }, 1000); }); $(document).ready(function () { $('.trigger').click(function () { $('.modal-wrapper').toggleClass('open'); $('.page-wrapper').toggleClass('blur'); return false; }); });
//]]>