Carnet Wiki

Affichage unique d’une boîte modale

Objectif : ouvrir une boîte modale sur n’importe quelle page en javascript, avec pose d’un cookie pour ne l’afficher qu’une seule fois, et au moyen des outils de base fournis avec SPIP.

Il est possible de configurer l’affichage d’une modale « splash » dans ?exec=configurer_mediabox, mais elle s’affichera sur n’importe quelle page du site, on cherche à avoir quelque chose d’un peu plus souple.

NB : ce sont des notes en vrac

Pour la gestion des cookies en javascript, SPIP fournit la librairie JavaScript Cookie v2.1.4

Pour la modale, on utilise la mediabox tout simplement.

Exemple 1

Dans cet exemple, le contenu de la modale sera dans un squelette à part « modale.html », qui contient le contenu d’un article / page unique :

<BOUCLE_modale(ARTICLES) {page = #ENV{pageunique}}>
<h1>#TITRE</h1>
#TEXTE
etc.
</BOUCLE_modale>

Ensuite, on ne veut afficher cette modale que sur une rubrique disposant d’une certaine composition, et que si l’article associé existe.

Dans le <head> du squelette de la rubrique, on ajoute un script inline.
Au premier affichage de la modale, on pose un cookie avec une durée de N jours.

NB : pour cet exemple, il s’agit de l’inclusion head/rubrique.html de z-core, à cet endroit jQuery n’est pas encore chargé, c’est pourquoi on met window.onload au lieu de $(document).ready ou autre.
On utilise également le paramètre var_zajax=content de zcore.

<BOUCLE_rubrique_head(RUBRIQUES){id_rubrique}>
<BOUCLE_modale(ARTICLES) {page=truc} {0,1} {si #COMPOSITION|=={machin}}>
<script>
window.onload = function (){
	var cookie_modale = 'modalsplash_rubrique_[(#_rubrique_head:COMPOSITION)]';
	if (!Cookies.get(cookie_modale)) {
		$.fn.mediabox({
			href: '[(#URL_PAGE{modale}|parametre_url{pageunique,#PAGE,&}|parametre_url{var_zajax,content,&})]',
			title: '#TITRE',
			minHeight: '75%',
			onComplete: Cookies.set(cookie_modale, 'ok', { expires: 14 }),
		});
	}
}
</script>
</BOUCLE_modale>
<BOUCLE_rubrique_head>
tcharlss - Mise à jour :19 novembre 2022 à 12h27min