« Widget:ModalLink » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
<noinclude> | <noinclude> | ||
Widget pour ouvrir un lien interne dans une boîte modale. | Widget pour ouvrir un lien interne dans une boîte modale. | ||
Syntaxe : {{#widget:ModalLink|page= | Syntaxe : {{#widget:ModalLink|page=Doc:Convoiteux|texte=Convoiteux}} | ||
</noinclude> | </noinclude> | ||
<!-- Bouton ou lien déclencheur --> | <!-- Bouton ou lien déclencheur --> | ||
<a href="/ | <a href="/wiki<!--{$page|escape:'url'}-->" class="modal-trigger-<!--{$page|escape:'htmlall'}-->" 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) --> | ||
Version du 27 septembre 2026 à 12:53
Widget pour ouvrir un lien interne dans une boîte modale. Syntaxe :
<a href="/wiki" 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.style.display = 'none';
}
});
})(); </script>