Retourner à la page d'accueil de TJS
Robloche, que vous pouvez retrouver sur les forums, nous propose ce tutorial sur les objets Popup de microsoft.
Merci à lui :)
Voici un popup qui tient sur une seule ligne, mais c'est bien parce que je l'ai voulu...
Ce popup, par contre, tient sur plusieurs lignes et a une largeur fixe. La longueur est ajustée en fonction du contenu du tableau.
Un peu de texte.
Encore du texte.

Tutorial sur les objets Popup

Sur une page HTML, on a parfois besoin d'afficher des informations lorsque l'utilisateur passe le curseur de la souris sur un objet, un peu à la manière des info-bulles désormais classiques en informatique. Nous avons alors le choix entre deux procédés : l'utilisation de calques ou l'ouverture d'une nouvelle fenêtre (popup classique). Mais il existe pourtant une troisième alternative : les objets Popup. Ceux-ci sont disponibles dans Internet Explorer 5.5 et versions suivantes. Cependant, on ne trouve que peu d'informations à ce sujet sur Internet, à part dans la documentation de Microsoft, alors que ces objets peuvent se révéler particulièrement pratiques, si bien sûr, on accepte que son site ne soit visible que sous IE. Les trois avantages immédiats de ces objest, par rapport aux popups classiques (ouverture d'une nouvelle fenêtre) sont :

  • pas de nouvelle fenêtre à l'écran ;
  • pas de perte du focus pour l'utilisateur ;
  • pas de multiplication des popups et fin de la fastidieuse opération de fermeture qui va avec.

Nous allons donc voir ici quelques exemples d'utilisation et de manipulation de ces objets Popup afin de bien débuter.

1. Un premier exemple

Commençons tout de suite avec un petit exemple : passez la souris ici.

Cliquez pour voir le code qui permet d'obtenir ceci : 

Comme nous le voyons dans le code précédent, c'est la fonction createPopup() qui sert à créer l'objet Popup proprement dit. Cette fonction ne prend pas de paramètre. Ensuite, on paramètre son style avec les attributs classiques. Et enfin, on l'affiche grâce à la fonction show(). Cette fonction prend en paramètre la position du coin haut gauche du popup (ici, nous utilisons les attributs event.x et event.y pour connaître la position du curseur de la souris), ses dimensions (largeur et hauteur) et l'objet par rapport auquel il faut le placer (ici, nous le positionnons par rapport au corps de notre document principal grâce à document.body).

2. Remarque

Il est important de noter qu'on ne peut avoir qu'un seul objet popup à la fois. C'est pourquoi, il est pratique de déclarer un tel objet au début de la page et de réutiliser cet objet chaque fois que c'est nécessaire. Voici un exemple : passez la souris sur le début et sur la fin de cette phrase. Comme vous le constatez, l'apparition d'un second popup fait disparaître le premier.

Cliquez pour voir le code qui a produit cet exemple : 

3. Cacher le popup

On peut aussi préférer que le popup s'efface dès que le curseur de la souris quitte la zone "sensible", comme le montre cet exemple : passez la souris ici.

Cliquez pour voir la fonction à ajouter : 

Cliquez pour voir la modification à apporter au lien : 

Ici, c'est la fonction hide() qui va masquer le popup courant.

4. Et avec une image ?

On peut évidemment faire la même chose avec des images :

Cliquez pour voir le code correspondant (les fonctions utilisées étant les mêmes que précédemment) : 

5. Autre évènement : le clic

Et enfin, plutôt que de réagir au passage de la souris, on peut très bien attendre un clic :

Cliquez pour voir le code associé : 

6. Pour aller plus loin

Voilà, nous avons à peu près fait le tour des utilisations classiques de ces objets, mais une chose nous fait encore cruellement déaut. En effet, comme nous l'avons vu, lors de l'affichage du popup, il faut préciser sa taille. Or, celle-ci nous est bien souvent inconnue quand le contenu du popup est variable... Mais voici une petite astuce pour y remédier.

Il suffit de "préparer" tous ses popups à l'avance en les affichant dans des tableaux hors écran. Ainsi, lors de leur affichage, il suffit de récupérer la taille des tableaux (qui, eux, s'adaptent correctement à leur contenu) et d'utiliser celle-ci pour le popup. Voici un exemple d'une telle utilisation :

   

Cliquez pour voir le code utilisé : 

Sans oublier les fameux tableaux qui contiennent les textes à afficher (à ce propos, on peut mettre à peu près n'importe quoi dans un popup). Cliquez pour voir le code des tableaux et le style associé : 

7. Pour résumer

L'utilisation de ces objets se décompose en deux parties :

  • Une partie HTML dans laquelle on lie un évènement (onClick, onMouseOver, etc.) à l'apparition du popup ;
  • Une partie JavaScript qui elle-même se découpe en quatre étapes :
    1. Création de l'objet via createPopup() ;
    2. Écriture du contenu et du style de cet objet via document.body.innerHTML et les attributs classiques de style ;
    3. Affichage de l'objet via show() ;
    4. Masquage de l'objet via hide() (éventuellement, puisque dans tous les cas, un clic en dehors de l'objet le ferme).

Chercher une fonction, un objet, ...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 13/12/2018 20:04:17 sur php7 en 17.85 ms