Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m
Etiqueta: Revertido
Linha 1: Linha 1:
<style>
<script>
.gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647;isolation:isolate}
(function(){
.gx-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:saturate(.2) brightness(.55);-webkit-backdrop-filter:saturate(.2) brightness(.55);mix-blend-mode:normal;will-change:backdrop-filter}
  var css = ".gx-overlay{position:fixed;inset:0;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,.5);overflow:hidden}
            ".gx-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.82)}"+
.gx-modal img{display:block;max-width:100%;max-height:92vh;height:auto;width:auto}
            ".gx-modal{position:fixed;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;inset:0;margin: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-modal img{display:block;max-width:100%;max-height:92vh;height:auto;width:auto}"+
.gx-close:hover{background:rgba(255,255,255,.25)}
            ".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}"+
.gx-open{overflow:hidden!important}
            ".gx-close:hover{background:rgba(255,255,255,.25)}"+
.gifbox{cursor:pointer;text-decoration:underline;color:#0645ad}
            ".gx-open{overflow:hidden!important}"+
.gifbox:visited{color:#0b0080}
            ".gifbox{cursor:pointer;text-decoration:underline;color:#0645ad}"+
body.gx-open *{pointer-events:none!important}
            ".gifbox:visited{color:#0b0080}";
body.gx-open .gx-overlay,body.gx-open .gx-overlay *{pointer-events:auto!important}
  var style = document.createElement("style");
</style>
  style.type = "text/css";
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
 
  var overlay = document.createElement("div");
  overlay.className = "gx-overlay";
  overlay.setAttribute("role","dialog");
  overlay.setAttribute("aria-modal","true");
  overlay.innerHTML = '<div class="gx-backdrop"></div><div class="gx-modal" role="document"><button class="gx-close" type="button" aria-label="Fechar">&times;</button><img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer"></div>';
  document.body.appendChild(overlay);


<div class="gx-overlay" role="dialog" aria-modal="true" aria-label="Visualização de imagem">
  var backdrop = overlay.querySelector(".gx-backdrop");
  <div class="gx-backdrop"></div>
   var modal    = overlay.querySelector(".gx-modal");
   <div class="gx-modal" role="document">
  var imgEl    = overlay.querySelector("#gx-img");
    <button class="gx-close" type="button" aria-label="Fechar">&times;</button>
  var closeEl  = overlay.querySelector(".gx-close");
    <img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer">
   var lastActive = null;
   </div>
</div>


<script>
   function openBox(url, altText){
(function(){
     if(!url) return;
  var overlay=document.querySelector('.gx-overlay');
     lastActive = document.activeElement;
  var backdrop=overlay.querySelector('.gx-backdrop');
     document.body.classList.add("gx-open");
  var modal=overlay.querySelector('.gx-modal');
     imgEl.src = url;
  var imgEl=overlay.querySelector('#gx-img');
     imgEl.alt = altText || "";
  var closeEl=overlay.querySelector('.gx-close');
     overlay.style.display = "flex";
  var lastActive=null;
     closeEl.tabIndex = 0;
   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();
     closeEl.focus();
   }
   }
   function closeBox(){
   function closeBox(){
     overlay.style.display='none';
     overlay.style.display = "none";
     document.body.classList.remove('gx-open');
     document.body.classList.remove("gx-open");
     imgEl.src='';
     imgEl.src = "";
     imgEl.alt='';
     imgEl.alt = "";
     if(lastActive&&typeof lastActive.focus==='function'){lastActive.focus()}
     if(lastActive && lastActive.focus) lastActive.focus();
   }
   }
   overlay.addEventListener('click',function(e){
 
     if(e.target===overlay||e.target===backdrop)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){
 
     var t=e.target;
   document.addEventListener("click", function(e){
     while(t&&t!==document){
     var t = e.target;
       if(t.classList&&t.classList.contains('gifbox'))break;
     while(t && t !== document){
       t=t.parentNode;
       if(t.classList && t.classList.contains("gifbox")) break;
       t = t.parentNode;
     }
     }
     if(!t||t===document)return;
     if(!t || t === document) return;
     e.preventDefault();
     e.preventDefault();
     var url=t.getAttribute('data-gif')||t.getAttribute('href');
     var url = t.getAttribute("data-gif") || t.getAttribute("href");
     var alt=t.getAttribute('data-alt')||t.textContent.trim();
     var alt = t.getAttribute("data-alt") || t.textContent.trim();
     if(!url)return;
     if(!url) return;
     openBox(url,alt);
     openBox(url, alt);
   },false);
   }, false);
})();
})();
</script>
</script>

Edição das 02h46min de 14 de agosto de 2025

<script> (function(){

 var css = ".gx-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2147483647}"+
           ".gx-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.82)}"+
           ".gx-modal{position:fixed;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;inset:0;margin:auto}"+
           ".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}"+
           ".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}";
 var style = document.createElement("style");
 style.type = "text/css";
 style.appendChild(document.createTextNode(css));
 document.head.appendChild(style);
 var overlay = document.createElement("div");
 overlay.className = "gx-overlay";
 overlay.setAttribute("role","dialog");
 overlay.setAttribute("aria-modal","true");

overlay.innerHTML = '

<button class="gx-close" type="button" aria-label="Fechar">×</button><img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer">

';

 document.body.appendChild(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.tabIndex = 0;
   closeEl.focus();
 }
 function closeBox(){
   overlay.style.display = "none";
   document.body.classList.remove("gx-open");
   imgEl.src = "";
   imgEl.alt = "";
   if(lastActive && lastActive.focus) 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>