[SCRIPT] Afficher des messages d'informations temporaires (splash screen)

On voit parfois des messages en bleu, lorsqu'on suppprime un article par exemple :

Ces messages se ferment lorsqu'on clique dessus, ou automatiquement après quelques instants.

Pour en afficher un, il suffit d'appeler la fonction Javascript Design.addSplash.

Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blogs, en passant par le formulaire de contact.

Cliquez sur ce bouton pour afficher un message :

Voici le code HTML de ce bouton, avec un appel Javascript sur clic :

<input onclick="Design.addSplash('Ce message va se fermer tout seul')" type="button" value="Afficher un message" />

Ces messages sont de classe splash, et donc pour modifier leur visuel on peut écrire du code CSS avec le sélecteur .splash.

Une fois un message créé, on peut trouver son identifiant avec la fonction Design.idSplashs.getLast().
On obtient ainsi l'identifiant du dernier message affiché, que l'on peut utiliser pour avoir l'élément HTML correspondant (qui sera d'identifiant « splash1 » par exemple).

On peut alors agir sur le message (son élément div), en modifiant par exemple son contenu pour afficher du code HTML (par défaut on ne peut afficher que du texte non formaté) :

// Fonction d'affichage d'un message temporaire
// html = code HTML du contenu
// timeout = délai en millisecondes
function mySplashArticle(html, timeout)
{
// Affiche le message vide
Design.addSplash("",timeout);
// Récupère l'élément HTML correspondant au message
var mysplashelt=$('splash'+Design.idSplashs.getLast());                  
// Passage en texte non gras (ces messages sont en gras par défaut)
mysplashelt.style.fontWeight="normal";
// Injecte le HTML dans le message (remplacer " par \")
mysplashelt.innerHTML=html;
}

Je vous invite si besoin à ranger cette fonction dans un module comme expliqué ici : Ranger ses fonctions Javascript dans un module masqué.

 Il suffit ensuite d'appeler cette fonction en passant en paramètre :

• le code HTML du contenu ;
• le délai d'affichage en millisecondes (2000ms = 2s par défaut);

Voici un exemple d'utilisation :

// HTML du contenu 
var html="<p style=\"text-align: center;\">" +
 "<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
 "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>" +
 "<p>Elle va rester affichée trois secondes.</p>";
mySplashArticle(html,3000);

Notez que le HTML est une chaîne de caractères entre guillemets (").
Pour y écrire des guillemets, il faut remplacer " par \"
On évite également les retours à la ligne (utilisez <br /> pour un retour à la ligne en HTML).

Si le message doit s'afficher à l'ouverture du blog, attention à placer le code dans onJSFilesLoaded (cf. Mon premier code Javascript - afficher un message).