« Widget:ModalLink » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 5 : | Ligne 5 : | ||
<!-- Bouton ou lien déclencheur --> | <!-- Bouton ou lien déclencheur --> | ||
<a href="/index.php/<!--{$page|escape:' | <a href="/index.php/<!--{$page|escape:'htmlall'}-->" class="modal-trigger-<!--{$page|md5}-->" style="cursor:pointer;"><!--{$texte|default:$page|escape:'html'}--></a> | ||
<!-- Structure de la boîte modale (cachée par défaut) --> | <!-- Structure de la boîte modale (cachée par défaut) --> | ||
<div id="modal-box-<!--{$page| | <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;"> | ||
<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;"> | <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;"> | ||
<span class="modal-close-<!--{$page| | <span class="modal-close-<!--{$page|md5}-->" style="position:absolute; top:10px; right:20px; font-size:28px; font-weight:bold; cursor:pointer;">×</span> | ||
<!-- Contenu de la page wiki embarqué via iframe (mode épuré action=render) --> | <!-- 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> | <iframe src="/index.php?title=<!--{$page|escape:'url'}-->&action=render" style="width:100%; height:100%; border:none; margin-top:20px; flex-grow:1;"></iframe> | ||
| Ligne 18 : | Ligne 18 : | ||
<script> | <script> | ||
(function() { | (function() { | ||
var trigger = document.querySelector('.modal-trigger-<!--{$page| | var trigger = document.querySelector('.modal-trigger-<!--{$page|md5}-->'); | ||
var modal = document.getElementById('modal-box-<!--{$page| | var modal = document.getElementById('modal-box-<!--{$page|md5}-->'); | ||
var closeBtn = document.querySelector('.modal-close-<!--{$page| | var closeBtn = document.querySelector('.modal-close-<!--{$page|md5}-->'); | ||
trigger.addEventListener('click', function(e) { | trigger.addEventListener('click', function(e) { | ||
| Ligne 33 : | Ligne 33 : | ||
window.addEventListener('click', function(e) { | window.addEventListener('click', function(e) { | ||
if (e.target == modal) { | if (e.target == modal) { | ||
modal | modal.style.display = 'none'; | ||
} | } | ||
}); | }); | ||
})(); | })(); | ||
</script> | </script> | ||
Version du 27 septembre 2026 à 13:37
Widget pour ouvrir un lien interne dans une boîte modale. Syntaxe :
<a href="/index.php/" class="modal-trigger-" style="cursor:pointer;"></a>
<script> (function() {
var trigger = document.querySelector('.modal-trigger-');
var modal = document.getElementById('modal-box-');
var closeBtn = document.querySelector('.modal-close-');
trigger.addEventListener('click', function(e) {
e.preventDefault(); // Empêche le navigateur d'ouvrir le lien normalement
modal.style.display = 'flex';
});
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
});
window.addEventListener('click', function(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
});
})(); </script>