Widget:Teste

<style> /* ===== Lightbox de GIF universal ===== */ .gx-overlay {

 position: fixed;
 inset: 0;
 background: rgba(0,0,0,.86);
 display: none;            /* vira flex quando abre */
 align-items: center;
 justify-content: center;
 z-index: 2147483647;      /* cobre QUALQUER header/menu da wiki */

}

.gx-modal {

 position: relative;
 max-width: min(92vw, 1200px);
 max-height: 92vh;
 background: #000;         /* fundo pra não “estourar” GIFs com transparência */
 border-radius: 12px;
 box-shadow: 0 10px 40px rgba(0,0,0,.5);
 overflow: hidden;

}

.gx-modal img {

 display: block;
 max-width: 100%;
 max-height: 92vh;
 height: auto;
 width: auto;
 image-rendering: auto;

}

.gx-close {

 position: absolute;
 top: 8px; right: 8px;
 width: 34px; height: 34px;
 border-radius: 999px;
 background: rgba(255,255,255,.16);
 border: 1px solid rgba(255,255,255,.38);
 color: #fff;
 font-size: 22px;
 line-height: 32px;
 text-align: center;
 cursor: pointer;
 user-select: none;

} .gx-close:hover { background: rgba(255,255,255,.25); }

.gx-open { overflow: hidden !important; } /* trava o scroll da página quando aberto */

/* Link helper (opcional): se quiser, use só class="gifbox" num que vira link */ .gifbox { cursor: pointer; text-decoration: underline; color: #0645ad; } .gifbox:visited { color: #0b0080; } </style>

   <button class="gx-close" type="button" aria-label="Fechar">×</button>
   <img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer">

<script> (function(){

 // cria refs
 var overlay = document.querySelector('.gx-overlay');
 var modal   = overlay.querySelector('.gx-modal');
 var imgEl   = overlay.querySelector('#gx-img');
 var closeEl = overlay.querySelector('.gx-close');

 // abre overlay com URL
 function openBox(url, altText){
   if(!url) return;
   document.body.classList.add('gx-open');
   imgEl.src = url;             // carrega GIF (externo ou interno)
   imgEl.alt = altText || ;
   overlay.style.display = 'flex';
 }

 // fecha overlay
 function closeBox(){
   overlay.style.display = 'none';
   document.body.classList.remove('gx-open');
   imgEl.src = ;              // limpa pra não ficar gastando CPU do GIF
   imgEl.alt = ;
 }

 // clique fora da imagem fecha
 overlay.addEventListener('click', function(e){
   if(e.target === overlay) closeBox();
 });
 closeEl.addEventListener('click', closeBox);
 document.addEventListener('keydown', function(e){
   if(e.key === 'Escape') closeBox();
 });

 // Delegação: qualquer elemento com class="gifbox" vira trigger
 // 1) <a class="gifbox" href="URL.gif">Texto</a>
 // 2) Texto
 document.addEventListener('click', function(e){
   var t = e.target;
   // sobe até achar um elemento com .gifbox
   while (t && t !== document) {
     if (t.classList && t.classList.contains('gifbox')) break;
     t = t.parentNode;
   }
   if (!t || t === document) return;

   e.preventDefault();

   var url = t.getAttribute('data-gif') || t.getAttribute('href');
   var alt = t.getAttribute('data-alt') || t.textContent.trim();

   // fallback: se href não é gif, não faz nada
   if (!url) return;

   openBox(url, alt);
 }, false);

})(); </script>