Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m Etiqueta: Revertido |
m Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
<!-- | <!-- HTML do botão --> | ||
<span class="gla-gif-trigger" style="cursor:pointer; color:#0645ad; text-decoration:underline;"> | <span class="gla-gif-trigger" style="cursor:pointer; color:#0645ad; text-decoration:underline;"> | ||
Ver demonstração | {{{texto|Ver demonstração}}} | ||
</span> | </span> | ||
<style> | <style> | ||
.gla-gif-overlay { | .gla-gif-overlay { | ||
position: fixed; top:0; left:0; width:100%; height:100%; | 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; | z-index: 9999; | ||
} | } | ||
.gla-gif-content { | .gla-gif-content { | ||
position: relative; | position: relative; max-width: 90%; max-height: 90%; | ||
} | } | ||
.gla-gif-content img { | .gla-gif-content img { | ||
max-width: 100%; max-height: | max-width: 100%; max-height: 100%; | ||
display: block; | display: block; border-radius: 8px; | ||
} | } | ||
.gla-gif-close { | .gla-gif-close { | ||
position: absolute; top: | position: absolute; top: -10px; right: -10px; | ||
font-size: | background: #fff; border-radius: 50%; | ||
cursor: pointer; | font-size: 20px; line-height: 20px; padding: 5px; | ||
cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5); | |||
} | } | ||
</style> | </style> | ||
<div class="gla-gif-overlay"> | |||
<div class="gla-gif-content"> | |||
<span class="gla-gif-close">×</span> | |||
<img src="" alt="GIF"> | |||
</div> | |||
</div> | |||
<script> | <script> | ||
(function(){ | (function(){ | ||
var | var gifUrl = "{{{gif}}}"; | ||
var overlay = document.querySelector('.gla-gif-overlay'); | var overlay = document.querySelector('.gla-gif-overlay'); | ||
var | var gifImg = overlay.querySelector('img'); | ||
var | 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> | </script> | ||
Edição das 02h27min de 14 de agosto de 2025
Ver demonstração
<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>
<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>