Force pop-up image of any image on the wapkiz and wapaxo website.

adminMarch 31, 20241 CommentsCodes And Scripts157 Views

This code uses css, html and a little javascript to open an image in pop-up on the same page, it works for wapaxo, wapkiz, wapka and xtgem websites.

First copy the code below to your style sheet.


  .popup {
              display: none;
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.7);
              justify-content: center;
              align-items: center;
          }
  
          .popup img {
              max-width: 90%;
              max-height: 90%;
              border-radius: 10px;
          }
  
          .popup .close {
              position: absolute;
              top: 20px;
              right: 20px;
              font-size: 30px;
              color: white;
              cursor: pointer;
          }

Then copy this 2 codes below and paste it in the footer of your website, for wapkiz users the footer is page (-2).


 <div class="popup"> <span class="close">&times;</span> <img src="" alt="Imagem Ampliada"> </div>


 <script> document.querySelector("img").addEventListener("click", function() { document.querySelector(".popup img").src = this.src; document.querySelector(".popup").style.display = "flex"; }); document.querySelector(".close").addEventListener("click", function() { document.querySelector(".popup").style.display = "none"; }); </script>

Solved, just click on any image on the website and you will see the difference.