Créer des pop-up intelligentes

  • Profil : Débutant, Expert
  • Thème : Accessibilité, Pages dynamiques
  • Auteur : Fabrice Bonny
  • Mise à jour : 25/06/2008

En bref

Comment ouvrir une nouvelle fenêtre sans se priver des internautes qui ne disposent pas de JavaScript ou l’ont désactivé ?

Les pop-up, un mal nécessaire ?

Tout d'abord, faisons un point sur les pop-up, ces fenêtres qui s'ouvrent le plus souvent contre notre volonté. Ce genre de pratique est à bannir dans le cas où l'on ouvre une fenêtre de taille normale, par exemple pour un lien vers un autre site. En effet, on casse la navigation de l'internaute qui ne peut plus utiliser le bouton de retour et on impose ses choix. C'est une excellente façon de faire fuir le visiteur !

Mais il existe des cas où une pop-up rend de nombreux services : afficher une légende, une aide, une photo, etc. Seulement pour ouvrir cette fenêtre, il faut passer par un langage de script qui n'est pas forcément supporté par le navigateur de l'internaute, donc se priver de visiteurs.

Autant les faire proprement

Nous allons voir comment faire en sorte de n'oublier personne tout en conservant les pop-up dans notre arsenal. Il suffit tout simplement de n'ouvrir la fenêtre que si JavaScript est activé. Comment, me direz-vous ? Un exemple va nous aider.

<a href="page.htm" onclick="window.open('page.htm');">

Explications : le lien classique pointe vers la page de destination via href tandis que le onclick ne se déclenche que si la navigateur comprend JavaScript.

Astuce : —

Vous pouvez vous épargner de renseigner deux fois la destination en profitant d'un objet très utile en JavaScript : this. Cet objet fait référence à l'objet en cours, c'est-à-dire le lien dans notre cas. On peut donc appeler la destination comme ceci :

<a href="page.htm" onclick="window.open(this.href);">

Ça ne marche pas !

Si vous avez tenté de lancer cet exemple, vous avez sûrement constaté un problème. La nouvelle fenêtre s'ouvre bien mais l'ancienne est aussi dirigée vers la nouvelle page. Que s'est-il passé ? L'événement onclick se déclenche au clic de la souris et effectue l'action entre les guillemets mais l'événement continue sa route : on dit qu'il se propage. Il va donc poursuivre son action et déclencher le lien hypertexte indiqué par href. Pour éviter cela, il suffit d'arrêter la propagation en retournant false.


<a href="page.htm" onclick="window.open(this.href); return false;">

Les options possibles

Voyons maintenant les options possibles pour la pop-up. La syntaxe est :

window.open('URL', 'nom', 'options');

Le mieux étant bien sûr de laisser le maximum de liberté à l'internaute, par exemple : window.open('/img/logo.png', 'photo', 'height=100, width=200, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); ouvre une pop-up présentant notre logo. Cette fenêtre est dimensionnée, positionnée et elle conserve la barre de menu permettant d'imprimer l'image, tous les internautes ne sachant pas utiliser le clic droit. Elle peut aussi être redimensionnée, donc les « ascenseurs » ont été supprimés, l'image étant réduite.

Vous pouvez tester cet exemple.

Attention : —

Une erreur courante consiste à ouvrir une fenêtre non redimensionnable et sans barres de défilement. Si la police est réglée différemment, par exemple, il se peut qu'une partie de la page ne soit pas visible. Vous pouvez tester cet exemple.

Conclusion

Nous avons vu qu'accessibilité et ouverture ne signifie pas appauvrissement. Il est parfaitement possible d'ouvrir une pop-up tout en proposant des alternatives. Il suffit pour cela de respecter quelques règles simples pour permettre à chacun d'accéder à l'information selon ses possibilités et ses choix.

Une question, une remarque ? Écrivez à l'auteur.

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par l'APINC et propulsé par SPIP.