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
 
(157 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<!-- HTML do botão -->
<span class="gla-gif-trigger" style="cursor:pointer; color:#0645ad; text-decoration:underline;">
  {{{texto|Ver demonstração}}}
</span>


<style>
.gla-gif-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.gla-gif-content {
  position: relative; max-width: 90%; max-height: 90%;
}
.gla-gif-content img {
  max-width: 100%; max-height: 100%;
  display: block; border-radius: 8px;
}
.gla-gif-close {
  position: absolute; top: -10px; right: -10px;
  background: #fff; border-radius: 50%;
  font-size: 20px; line-height: 20px; padding: 5px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
</style>
<div class="gla-gif-overlay">
  <div class="gla-gif-content">
    <span class="gla-gif-close">&times;</span>
    <img src="" alt="GIF">
  </div>
</div>
<script>
(function(){
  var gifUrl = "{{{gif}}}";
  var overlay = document.querySelector('.gla-gif-overlay');
  var gifImg  = overlay.querySelector('img');
  var closeBtn = overlay.querySelector('.gla-gif-close');
  var trigger  = document.querySelector('.gla-gif-trigger');
  trigger.addEventListener('click', function(){
    gifImg.src = gifUrl;
    overlay.style.display = 'flex';
  });
  function closeOverlay(){
    overlay.style.display = 'none';
    gifImg.src = '';
  }
  closeBtn.addEventListener('click', closeOverlay);
  overlay.addEventListener('click', function(e){
    if(e.target === overlay) closeOverlay();
  });
})();
</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”