Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m (Limpou toda a página) Etiquetas: Reversão manual anulando |
m Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
<!-- Botão / texto que abre --> | |||
<span class="gla-gif-trigger" style="cursor:pointer; color:#0645ad; text-decoration:underline;"> | |||
Ver demonstração | |||
</span> | |||
<!-- Overlay escondido --> | |||
<div class="gla-gif-overlay" style="display:none;"> | |||
<div class="gla-gif-backdrop"></div> | |||
<div class="gla-gif-content"> | |||
<span class="gla-gif-close">×</span> | |||
<img src="https://i.imgur.com/GNQyaO5.gif" alt="GIF de demonstração" /> | |||
</div> | |||
</div> | |||
<style> | |||
.gla-gif-overlay { | |||
position: fixed; top:0; left:0; width:100%; height:100%; | |||
z-index: 9999; | |||
} | |||
.gla-gif-backdrop { | |||
position: absolute; top:0; left:0; width:100%; height:100%; | |||
background: rgba(0,0,0,0.8); | |||
} | |||
.gla-gif-content { | |||
position: relative; | |||
max-width: 90%; max-height: 90%; | |||
margin: auto; | |||
top: 50%; transform: translateY(-50%); | |||
background: #fff; | |||
padding: 5px; | |||
border-radius: 6px; | |||
} | |||
.gla-gif-content img { | |||
max-width: 100%; max-height: 80vh; | |||
display: block; | |||
} | |||
.gla-gif-close { | |||
position: absolute; top: 5px; right: 10px; | |||
font-size: 28px; color: #fff; | |||
cursor: pointer; z-index: 10000; | |||
} | |||
</style> | |||
<script> | |||
(function(){ | |||
var trigger = document.querySelector('.gla-gif-trigger'); | |||
var overlay = document.querySelector('.gla-gif-overlay'); | |||
var backdrop = document.querySelector('.gla-gif-backdrop'); | |||
var closeBtn = document.querySelector('.gla-gif-close'); | |||
if(trigger && overlay){ | |||
trigger.addEventListener('click', function(){ | |||
overlay.style.display = 'block'; | |||
}); | |||
function closeOverlay(){ | |||
overlay.style.display = 'none'; | |||
} | |||
if(backdrop) backdrop.addEventListener('click', closeOverlay); | |||
if(closeBtn) closeBtn.addEventListener('click', closeOverlay); | |||
} | |||
})(); | |||
</script> | |||
Edição das 02h24min de 14 de agosto de 2025
Ver demonstração
<style> .gla-gif-overlay {
position: fixed; top:0; left:0; width:100%; height:100%; z-index: 9999;
} .gla-gif-backdrop {
position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8);
} .gla-gif-content {
position: relative; max-width: 90%; max-height: 90%; margin: auto; top: 50%; transform: translateY(-50%); background: #fff; padding: 5px; border-radius: 6px;
} .gla-gif-content img {
max-width: 100%; max-height: 80vh; display: block;
} .gla-gif-close {
position: absolute; top: 5px; right: 10px; font-size: 28px; color: #fff; cursor: pointer; z-index: 10000;
} </style>
<script> (function(){
var trigger = document.querySelector('.gla-gif-trigger');
var overlay = document.querySelector('.gla-gif-overlay');
var backdrop = document.querySelector('.gla-gif-backdrop');
var closeBtn = document.querySelector('.gla-gif-close');
if(trigger && overlay){
trigger.addEventListener('click', function(){
overlay.style.display = 'block';
});
function closeOverlay(){
overlay.style.display = 'none';
}
if(backdrop) backdrop.addEventListener('click', closeOverlay);
if(closeBtn) closeBtn.addEventListener('click', closeOverlay);
}
})(); </script>