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.
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');
- l'URL : il s'agit de l'adresse de la page ;
- le nom : vous pouvez donner un nom à la fenêtre, par exemple pour éviter les fenêtres multiples. Si vous donnez le nom
photoà votre fenêtre, un nouveau clic sur un lien remplace une éventuelle pop-up déjà ouverte, évitant de noyer l'internaute ; -
les options :
-
height: la hauteur de la fenêtre (exprimée en pixels) ; -
width: la largeur de la fenêtre (exprimée en pixels) ; -
top: la position verticale de la fenêtre par rapport au bord supérieur de l'écran (exprimée en pixels) ; -
left: la position horizontale de la fenêtre par rapport au bord gauche de l'écran (exprimée en pixels) ; -
toolbar: la présence de la barre d'outils (à l'aide d'un booléen :yesouno) ; -
location: la présence de la barre d'adresse (à l'aide d'un booléen :yesouno) ; -
menubar: la présence de la barre de menu (à l'aide d'un booléen :yesouno) ; -
resizable: la possibilité de redimensionner la fenêtre (à l'aide d'un booléen :yesouno) ; -
scrollbars: la présence des scrollbars ou ascenseurs (à l'aide d'un booléen :yesouno) ; -
status: la présence de la barre de statut (à l'aide d'un booléen :yesouno).
-
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.
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.
Vos commentaires
# Victor Le 19 septembre 2010 à 00:06
Merci pour cet article clair !
# pyros Le 1er mars 2011 à 13:39
Cet article est effectivement clair. Mais comment fait-on pour changer la couleur de fond d’une pop-up ? Background-color... n’est pas utilisable ? Merci par avance d’une réponse aussi claire.
# Fabrice Bonny Le 2 mars 2011 à 09:34 En réponse à : pyros
La page ouverte dans la pop-up n’est rien d’autre qu’une page normale. C’est donc dans le code de la page visée (page.htm dans mon exemple) qu’il faut modifier la feuille de style pour donner la couleur voulue.
# Nautilebleu Le 8 mars 2011 à 10:28
Pour signifier au navigateur de ne pas exécuter l’action par défaut, il est préférable de ne pas utiliser return false, qui interrompt totalement évènement (cela empêchera aussi l’évènement de bouillonner par exemple)
Il est préférable d’utiliser event.preventDefault() ; (pour les navigateurs respectant les standards) .
http://www.openjs.com/articles/prevent_default_action/
# emilie Le 8 juillet 2011 à 19:43
les explications marches aussi avec le logiciel izispot ?
# Fabrice Bonny Le 11 juillet 2011 à 09:50 En réponse à : emilie
Je ne connais pas du tout cet éditeur mais s’il permet de modifier directement le code HTML, vous pouvez bien entendu ajouter le code proposé dans cet article.
# Arias Le 2 janvier 2012 à 17:24
Bonjour,
Et merci ! Cet article m’a bien aidé.
Je me demande cependant s’il est possible de lancer ce type de fenêtre en modale
# Rukamaru Le 28 août 2012 à 18:02
# Le 30 août 2012 à 15:40
merciii bcp
# Fabrice Bonny Le 3 septembre 2012 à 10:00
Il arrive que la pop-up semble s’ouvrir "ailleurs" si une autre page a déjà ouvert une pop-up qui n’a pas été refermée. Est-ce le cas ?
# med Le 18 janvier 2013 à 10:14
merci pour ce cour tres expliqué je vous souhaite une bonne contunuation
# Bibi Le 4 mars 2013 à 14:18
Bonjour, je pensais utiliser cette technique pour permettre aux internautes qui passent d’un site web A vers un site web B en cliquant sur un lien, de garder le site de départ en vue pour que l’internaute ne se sente pas "expulsé" vers B et puisse revenir à tout moment vers le site web A.
Par contre si le lien ne fonctionne que si le PC est compatible java, cela va poser pb. Auriez-vous une suggestion ? Autre langage, autre technique ?
# Fabrice Bonny Le 11 mars 2013 à 09:41
Il est possible de ne pas passer par Javascript (et non Java comme vous le dites, ce sont 2 langages bien différents) en utilisant un lien de type
<a href="…" target="_blank" title="lien vers blabla [ouverture d'une nouvelle fenêtre]">le texte du lien</a>. Attention à bien mettre un title pour prévenir les personnes aveugles, entre autre, de l’ouverture d’une nouvelle fenêtre et donc de la possibilité de revenir dans la première.# Dézo Yannick Le 1er juillet 2013 à 13:44
Merci beaucoup pour ce cours.
# Lau Le 29 septembre 2013 à 14:34
Merci a vous
pour le background de la fenêtre appelée il suffit de mettre un style dans la balise body
de le page qui s’ouvre dans la fenêtre :
<body style="background-color :#cceffa">
Lau
# Michel Le 26 novembre 2013 à 19:06
Bonjour,
J’ai une fenêtre popup qui pose problème avec le lien.
J’ai ceci :
a href="/articles/popup#" onclick ... modules/page_lecture_contrat.php etc.
A la place du lien "modules/page_lecture_contrat.php" qui doit s’ouvrir en popup, j’ai l’url de la page en cours !
Une idée ?
Merci
Lorsque je passe la souris sur le lien il indique
# Michèle Le 14 mai 2014 à 12:29
Bonjour à tous,
Merci beaucoup pour cet article très utile. Une question de débutante : est-il possible d’intégrer les options de widow.open dans la feuille de style externe ? Si oui, de quelle manière ?
D’avance, merci de votre réponse.
# Fabrice Bonny Le 14 mai 2014 à 19:16
Bonjour. Il n’est pas possible d’inclure les options de window.open dans une feuille de style externe (CSS) pour la simple raison que c’est du Javascript (JS).
# Michèle Le 21 mai 2014 à 12:26
Merci pour la réponse. Encore une question...de débutante (un peu moins)... :-)
Dans l’exemple, la dimension du popup est indiquée en pixel. Est-il possible d’intégrer ces infos en %, pour rendre le design flexible. Ou est le JS admet seulement des mesures fixes ?
D’avance, merci de votre réponse.
# Fabrice Bonny Le 21 mai 2014 à 19:51
Malheureusement, la fonction open n’admet que des pixels pour height et width.
# didier Le 29 mai 2014 à 11:40
c’est très astucieux ! Merci de cet outil.
# said Le 11 septembre 2014 à 13:18
merci bouceaup pour cette article je te demande le maniere de faire un pop under
# chedev Le 14 décembre 2014 à 08:30
Bonjour
En dépit du "location=0" (ou =no ?), je n’arrive pas à me débarrasser de la barre d’adresse (celle ou figure l’adresse de la pop-up). Je voudrai pourtant avoir une pop-up la plus dépouillée possible.
Comment est-ce possible ?
Merci d’avance pour votre réponse.
# lmalha Le 21 septembre 2016 à 23:05
Page wap diseponible
# Bryant Andrés Le 28 novembre 2017 à 22:34
Non, ce cours est mauvais parce qu’il ne montre que des lignes de code SANS DIRE Où il faut les placer. C’est peut-être un peu intéressant pour ceux qui savent. Mais dans ce cas là ça ne sert pas à grand’chose.
Pour faire des pop up sur ma page, voilà ce que j’ai fait :
Je crée une page (la principale) et ensuite autant de pages que je voudrai de pop up (que je nomme popup1, popup2, popup3 etc )
Dans la page principale, je colle simplement pour chaque pop up le code (en adaptant 1, 2, 3 etc) :
LETRA
<SCRIPT language="javascript">function ouvre_popup(page) {
window.open(page,"popup1.html","menubar=no, status=no, scrollbars=no, menubar=no, width=300, height=600");
}
</script>
Puis je fais mes pages html qui seront les popups , qui seront appeléesen cliquant sur un lien hypertexte
Ça donne : http://espagnolpratique.eu/audios/canciones.html
Vos commentaires
Suivre les commentaires :
|
