Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(156 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<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 <span> que vira link */
.gifbox { cursor: pointer; text-decoration: underline; color: #0645ad; }
.gifbox:visited { color: #0b0080; }
</style>
<div class="gx-overlay" role="dialog" aria-modal="true" aria-label="Visualização de imagem">
  <div class="gx-modal">
    <button class="gx-close" type="button" aria-label="Fechar">&times;</button>
    <img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer">
  </div>
</div>
<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) <span class="gifbox" data-gif="URL.gif">Texto</span>
  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>

Edição atual tal como às 19h10min de 12 de setembro de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Teste&oldid=39086”