« Widget:ModalLink » : différence entre les versions
Aucun résumé des modifications Balise : Révoqué |
Aucun résumé des modifications |
||
| (3 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 7 : | Ligne 7 : | ||
</noinclude> | </noinclude> | ||
<div class="wf-modal-widget style="display:inline;"> | <div class="wf-modal-widget" style="display:inline;"> | ||
<a href="/index.php?title=<!--{$page|escape:'url'}-->" class="wf-modal-trigger" style="cursor:pointer;"><!--{$texte|default:$page|escape:'html'}--></a> | <a href="/index.php?title=<!--{$page|escape:'url'}-->" class="wf-modal-trigger" style="cursor:pointer;"><!--{$texte|default:$page|escape:'html'}--></a> | ||
<div class="wf-modal-overlay" style="display: | <div class="wf-modal-overlay" style="display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center;"> | ||
<div class="wf-modal-box" style="background:white; padding:20px; border-radius:8px; width:min(900px,90%); height:80%; position:relative; box-shadow:0 4px 8px rgba(0,0,0,0.3); display:flex; flex-direction:column;"> | <div class="wf-modal-box" style="background:white; padding:20px; border-radius:8px; width:min(900px,90%); height:80%; position:relative; box-shadow:0 4px 8px rgba(0,0,0,0.3); display:flex; flex-direction:column;"> | ||
<span class="wf-modal-close" title="Fermer (Échap)" style="position:absolute; top:4px; right:12px; font-size:28px; font-weight:bold; cursor:pointer; line-height:1;">×</span> | <span class="wf-modal-close" title="Fermer (Échap)" style="position:absolute; top:4px; right:12px; font-size:28px; font-weight:bold; cursor:pointer; line-height:1;">×</span> | ||
Dernière version du 29 septembre 2026 à 22:24
Widget pour ouvrir une page du wiki dans une boîte modale (contenu épuré via action=render). Syntaxe :
- « texte » est optionnel (défaut : nom de la page). - Utilisable plusieurs fois sur la même page, sans réglage. - Sans JavaScript, le lien s'ouvre normalement (repli gracieux).
<script> (function() {
var root = document.currentScript.previousElementSibling;
var overlay = root.querySelector('.wf-modal-overlay');
var trigger = root.querySelector('.wf-modal-trigger');
var closeBtn = root.querySelector('.wf-modal-close');
function open(e) {
if (e) e.preventDefault();
overlay.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function close() {
overlay.style.display = 'none';
document.body.style.overflow = ;
}
trigger.addEventListener('click', open);
closeBtn.addEventListener('click', close);
overlay.addEventListener('click', function(e) {
if (e.target === overlay) close();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && overlay.style.display !== 'none') close();
});
})(); </script>