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: | ||
<style> | <style> | ||
.gx-overlay{position:fixed; | .gx-overlay { | ||
.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} | position: fixed; | ||
.gx-modal img{display:block;max-width:100%;max-height:92vh;height:auto;width:auto; | top: 0; left: 0; | ||
.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} | width: 100%; height: 100%; | ||
.gx-close:hover{background:rgba(255,255,255,.25)} | background: rgba(0,0,0,0.86); | ||
.gx-open{overflow:hidden!important} | display: none; | ||
.gifbox{cursor:pointer;text-decoration:underline;color:#0645ad} | align-items: center; | ||
.gifbox:visited{color:#0b0080 | justify-content: center; | ||
z-index: 2147483647; | |||
} | |||
.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,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> | </style> | ||
Edição das 02h37min de 14 de agosto de 2025
<style> .gx-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.86); display: none; align-items: center; justify-content: center; z-index: 2147483647;
} .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,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 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)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>