« Widget:ModalLink » : différence entre les versions

Dernière version du 27 septembre 2026 à 17:50

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).

 <a href="/index.php?title=" class="wf-modal-trigger" style="cursor:pointer;"></a>

   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>

@@ Ligne 1 : / Ligne 1 : @@
 <noinclude>
-Widget pour ouvrir un lien interne dans une boîte modale.
+Widget pour ouvrir une page du wiki dans une boîte modale (contenu épuré via action=render).
-Syntaxe : {{#widget:ModalLink|page=Nom_De_La_Page|texte=Texte du lien}}
+Syntaxe : {{#widget:ModalLink|page=Doc:Convoiteux|texte=Convoiteux}}
+- « 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).
 </noinclude>
-<!-- Bouton ou lien déclencheur -->
+<div class="wf-modal-widget">
-<a href="/index.php/<!--{$page|escape:'htmlall'}-->" class="modal-trigger-<!--{$page|md5}-->" 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: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;">
-<!-- Structure de la boîte modale (cachée par défaut) -->
+     <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 id="modal-box-<!--{$page|md5}-->" style="display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); align-items:center; justify-content:center;">
+      <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;">&times;</span>
-     <div style="background-color:white; padding:20px; border-radius:8px; width:70%; height:75%; position:relative; box-shadow:0 4px 8px rgba(0,0,0,0.2); display:flex; flex-direction:column;">
+      <iframe src="/index.php?title=<!--{$page|escape:'url'}-->&amp;action=render" style="width:100%; height:100%; border:none; margin-top:18px; flex-grow:1;"></iframe>
-        <span class="modal-close-<!--{$page|md5}-->" style="position:absolute; top:10px; right:20px; font-size:28px; font-weight:bold; cursor:pointer;">&times;</span>
-        <!-- Contenu de la page wiki embarqué via iframe (mode épuré action=render) -->
-        <iframe src="/index.php?title=<!--{$page|escape:'url'}-->&action=render" style="width:100%; height:100%; border:none; margin-top:20px; flex-grow:1;"></iframe>
      </div>
+  </div>
 </div>
 <script>
 (function() {
-     var trigger = document.querySelector('.modal-trigger-<!--{$page|md5}-->');
+     var root = document.currentScript.previousElementSibling;
-     var modal = document.getElementById('modal-box-<!--{$page|md5}-->');
+    var overlay = root.querySelector('.wf-modal-overlay');
-     var closeBtn = document.querySelector('.modal-close-<!--{$page|md5}-->');
+     var trigger = root.querySelector('.wf-modal-trigger');
+     var closeBtn = root.querySelector('.wf-modal-close');
-     trigger.addEventListener('click', function(e) {
+     function open(e) {
-         e.preventDefault(); // Empêche le navigateur d'ouvrir le lien normalement
+         if (e) e.preventDefault();
-         modal.style.display = 'flex';
+         overlay.style.display = 'flex';
-     });
+        document.body.style.overflow = 'hidden';
+     }
+    function close() {
+        overlay.style.display = 'none';
+        document.body.style.overflow = '';
+    }
-     closeBtn.addEventListener('click', function() {
+    trigger.addEventListener('click', open);
-         modal.style.display = 'none';
+     closeBtn.addEventListener('click', close);
+    overlay.addEventListener('click', function(e) {
+         if (e.target === overlay) close();
      });
+     document.addEventListener('keydown', function(e) {
-     window.addEventListener('click', function(e) {
+         if (e.key === 'Escape' && overlay.style.display !== 'none') close();
-         if (e.target == modal) {
-            modal.style.display = 'none';
-        }
      });
 })();
 </script>