Mudanças entre as edições de "Widget:Teste"
m Etiqueta: Revertido |
m Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.gx-overlay { | .gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647} | ||
.gx-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86)} | |||
.gx-modal{position:relative;max-width:min(92vw,1200px);max-height:92vh;background:#000;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} | |||
.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} | |||
.gifbox{cursor:pointer;text-decoration:underline;color:#0645ad} | |||
.gifbox:visited{color:#0b0080} | |||
} | |||
.gx-modal { | |||
} | |||
.gx-modal img { | |||
} | |||
.gx-close { | |||
} | |||
.gx-close:hover { background: rgba(255,255,255,.25) | |||
.gx-open { overflow: hidden !important | |||
.gifbox { cursor: pointer; text-decoration: underline; color: #0645ad | |||
.gifbox:visited { color: #0b0080 | |||
</style> | </style> | ||
<div class="gx-overlay" role="dialog" aria-modal="true" aria-label="Visualização de imagem"> | <div class="gx-overlay" role="dialog" aria-modal="true" aria-label="Visualização de imagem" style="pointer-events:auto"> | ||
<div class="gx-modal"> | <div class="gx-backdrop"></div> | ||
<div class="gx-modal" role="document"> | |||
<button class="gx-close" type="button" aria-label="Fechar">×</button> | <button class="gx-close" type="button" aria-label="Fechar">×</button> | ||
<img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer"> | <img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer"> | ||
| Linha 56: | Linha 22: | ||
(function(){ | (function(){ | ||
var overlay=document.querySelector('.gx-overlay'); | var overlay=document.querySelector('.gx-overlay'); | ||
var backdrop=overlay.querySelector('.gx-backdrop'); | |||
var modal=overlay.querySelector('.gx-modal'); | var modal=overlay.querySelector('.gx-modal'); | ||
var imgEl=overlay.querySelector('#gx-img'); | var imgEl=overlay.querySelector('#gx-img'); | ||
var closeEl=overlay.querySelector('.gx-close'); | var closeEl=overlay.querySelector('.gx-close'); | ||
var lastActive=null; | var lastActive=null; | ||
function openBox(url,altText){ | function openBox(url,altText){ | ||
if(!url)return; | if(!url)return; | ||
| Linha 70: | Linha 38: | ||
closeEl.focus(); | closeEl.focus(); | ||
} | } | ||
function closeBox(){ | function closeBox(){ | ||
overlay.style.display='none'; | overlay.style.display='none'; | ||
| Linha 77: | Linha 46: | ||
if(lastActive&&typeof lastActive.focus==='function'){lastActive.focus()} | if(lastActive&&typeof lastActive.focus==='function'){lastActive.focus()} | ||
} | } | ||
overlay.addEventListener('click',function(e){if(e.target===overlay)closeBox()}); | |||
overlay.addEventListener('click',function(e){ | |||
if(e.target===overlay||e.target===backdrop)closeBox(); | |||
}); | |||
closeEl.addEventListener('click',closeBox); | closeEl.addEventListener('click',closeBox); | ||
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeBox()}); | document.addEventListener('keydown',function(e){if(e.key==='Escape')closeBox()}); | ||
document.addEventListener('click',function(e){ | document.addEventListener('click',function(e){ | ||
var t=e.target; | var t=e.target; | ||
Edição das 02h39min de 14 de agosto de 2025
<style> .gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647} .gx-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86)} .gx-modal{position:relative;max-width:min(92vw,1200px);max-height:92vh;background:#000;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} .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} .gifbox{cursor:pointer;text-decoration:underline;color:#0645ad} .gifbox:visited{color:#0b0080} </style>
<script> (function(){
var overlay=document.querySelector('.gx-overlay');
var backdrop=overlay.querySelector('.gx-backdrop');
var modal=overlay.querySelector('.gx-modal');
var imgEl=overlay.querySelector('#gx-img');
var closeEl=overlay.querySelector('.gx-close');
var lastActive=null;
function openBox(url,altText){
if(!url)return;
lastActive=document.activeElement;
document.body.classList.add('gx-open');
imgEl.src=url;
imgEl.alt=altText||;
overlay.style.display='flex';
closeEl.setAttribute('tabindex','0');
closeEl.focus();
}
function closeBox(){
overlay.style.display='none';
document.body.classList.remove('gx-open');
imgEl.src=;
imgEl.alt=;
if(lastActive&&typeof lastActive.focus==='function'){lastActive.focus()}
}
overlay.addEventListener('click',function(e){
if(e.target===overlay||e.target===backdrop)closeBox();
});
closeEl.addEventListener('click',closeBox);
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeBox()});
document.addEventListener('click',function(e){
var t=e.target;
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();
if(!url)return;
openBox(url,alt);
},false);
})(); </script>