Widget:ModalLink - Historique des versions

Admin le 27 septembre 2026 à 17:50

2026-09-27T17:50:56Z

← Version précédente		Version du 27 septembre 2026 à 17:50
Ligne 1 :		Ligne 1 :
	~~Le code :~~
	~~'''~~
	<noinclude>		<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>		</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;">×</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'}-->&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;">×</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>
	</div>		</div>

	<script>		<script>
	(function() {		(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>		</script>
	~~'''~~

	~~L’appel~~
	~~'''~~
	~~Voici un exemple pour ouvrir la page des règles dans une boîte : {{#widget:ModalLink\|page=Doc:Convoiteux\|texte=Convoiteux}}~~
	~~'''~~

	~~L’erreur~~
	~~'''~~
	Erreur dans le widget ModalLink: Syntax error in template "wiki:wiki:ModalLink" on line 4 "<a href="/index.php/<!--{$page\|escape:'htmlall'}-->" class="modal-trigger-<!--{$page\|md5}-->" style="cursor:pointer;"><!--{$texte\|default:$page\|escape:'html'}--></a>" modifier 'md5' not allowed by security setting
	~~'''~~

Admin le 27 septembre 2026 à 17:27

2026-09-27T17:27:04Z

@@ Ligne 1 : / Ligne 1 : @@
 <noinclude>
 Widget pour ouvrir un lien interne dans une boîte modale.
@@ Ligne 38 : / Ligne 40 : @@
 })();
 </script>

Admin le 27 septembre 2026 à 13:37

2026-09-27T13:37:38Z

← Version précédente		Version du 27 septembre 2026 à 13:37
Ligne 5 :		Ligne 5 :

	<!-- Bouton ou lien déclencheur -->		<!-- Bouton ou lien déclencheur -->
	<a href="/index.php/<!--{$page\|escape:'~~url~~'}-->" class="modal-trigger-<!--{$page\|~~escape:'htmlall'~~}-->" style="cursor:pointer;"><!--{$texte\|default:$page\|escape:'html'}--></a>		<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\|~~escape:'htmlall'~~}-->" 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 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\|~~escape:'htmlall'~~}-->" style="position:absolute; top:10px; right:20px; font-size:28px; font-weight:bold; cursor:pointer;">×</span>		<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\|~~escape:'javascript'~~}-->');		var trigger = document.querySelector('.modal-trigger-<!--{$page\|md5}-->');
	var modal = document.getElementById('modal-box-<!--{$page\|~~escape:'javascript'~~}-->');		var modal = document.getElementById('modal-box-<!--{$page\|md5}-->');
	var closeBtn = document.querySelector('.modal-close-<!--{$page\|~~escape:'javascript'~~}-->');		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~~.style~~.style.display = 'none';		modal.style.display = 'none';
	}		}
	});		});
	})();		})();
	</script>		</script>

Admin le 27 septembre 2026 à 13:34

2026-09-27T13:34:34Z

← Version précédente		Version du 27 septembre 2026 à 13:34
Ligne 5 :		Ligne 5 :

	<!-- Bouton ou lien déclencheur -->		<!-- Bouton ou lien déclencheur -->
	<a href="/~~wiki~~<!--{$page\|escape:'url'}-->" class="modal-trigger-<!--{$page\|escape:'htmlall'}-->" style="cursor:pointer;"><!--{$texte\|default:$page\|escape:'html'}--></a>		<a href="/index.php/<!--{$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) -->

Admin le 27 septembre 2026 à 12:54

2026-09-27T12:54:33Z

← Version précédente		Version du 27 septembre 2026 à 12:54
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=~~Doc:Convoiteux~~\|texte=~~Convoiteux~~}}		Syntaxe : {{#widget:ModalLink\|page=Nom_De_La_Page\|texte=Texte du lien}}
	</noinclude>		</noinclude>

Admin le 27 septembre 2026 à 12:53

2026-09-27T12:53:01Z

← Version précédente		Version du 27 septembre 2026 à 12:53
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=~~Nom_De_La_Page~~\|texte=~~Texte du lien~~}}		Syntaxe : {{#widget:ModalLink\|page=Doc:Convoiteux\|texte=Convoiteux}}
	</noinclude>		</noinclude>

	<!-- Bouton ou lien déclencheur -->		<!-- Bouton ou lien déclencheur -->
	<a href="/~~wikifiction.fr/~~<!--{$page\|escape:'url'}-->" class="modal-trigger-<!--{$page\|escape:'htmlall'}-->" style="cursor:pointer;"><!--{$texte\|default:$page\|escape:'html'}--></a>		<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) -->

Admin le 27 septembre 2026 à 12:50

2026-09-27T12:50:09Z

← Version précédente		Version du 27 septembre 2026 à 12:50
Ligne 5 :		Ligne 5 :

	<!-- Bouton ou lien déclencheur -->		<!-- Bouton ou lien déclencheur -->
	<a href="/~~wiki~~/<!--{$page\|escape:'url'}-->" class="modal-trigger-<!--{$page\|escape:'htmlall'}-->" style="cursor:pointer;"><!--{$texte\|default:$page\|escape:'html'}--></a>		<a href="/wikifiction.fr/<!--{$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) -->

Admin le 27 septembre 2026 à 12:43

2026-09-27T12:43:30Z

← Version précédente		Version du 27 septembre 2026 à 12:43
Ligne 1 :		Ligne 1 :
	~~<html>~~
	<noinclude>		<noinclude>
	Widget pour ouvrir un lien interne dans une boîte modale.		Widget pour ouvrir un lien interne dans une boîte modale.
Ligne 39 :		Ligne 38 :
	})();		})();
	</script>		</script>
	~~</html>~~

Admin le 27 septembre 2026 à 12:31

2026-09-27T12:31:19Z

← Version précédente		Version du 27 septembre 2026 à 12:31
Ligne 1 :		Ligne 1 :
			<html>
	<noinclude>		<noinclude>
	Widget pour ouvrir un lien interne dans une boîte modale.		Widget pour ouvrir un lien interne dans une boîte modale.
Ligne 38 :		Ligne 39 :
	})();		})();
	</script>		</script>
			</html>

Admin : Page créée avec «  Widget pour ouvrir un lien interne dans une boîte modale. Syntaxe : {{#widget:ModalLink|page=Nom_De_La_Page|texte=Texte du lien}}

Widget:ModalLink - Historique des versions

Admin le 27 septembre 2026 à 17:50

Admin le 27 septembre 2026 à 17:27

Admin le 27 septembre 2026 à 13:37

Admin le 27 septembre 2026 à 13:34

Admin le 27 septembre 2026 à 12:54

Admin le 27 septembre 2026 à 12:53

Admin le 27 septembre 2026 à 12:50

Admin le 27 septembre 2026 à 12:43

Admin le 27 septembre 2026 à 12:31

Admin : Page créée avec « Widget pour ouvrir un lien interne dans une boîte modale. Syntaxe : {{#widget:ModalLink|page=Nom_De_La_Page|texte=Texte du lien}}

Admin : Page créée avec «  Widget pour ouvrir un lien interne dans une boîte modale. Syntaxe : {{#widget:ModalLink|page=Nom_De_La_Page|texte=Texte du lien}}