[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > Javascript > Lecture du tutoriel

Les popups

	Auteur : Jimluiz Créé : le 31/03/2006 14:59:09 Modifié : le 30/05/2008 14:25:49 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Salut !
Dans ce tutoriel, je vais vous apprendre à ouvrir des popups en Javascript tout en laissant accessible votre site aux personnes n'ayant pas accès au Javascript ou l'ayant désactivé.
Même si vous ne connaissez rien au Javascript, vous allez voir, ce n'est pas très compliqué, et puis ici, on part de Zér0

Sommaire du chapitre :

Ouvrir un lien dans une nouvelle fenêtre
Une popup plus complexe
Astuces

Ouvrir un lien dans une nouvelle fenêtre

Vous avez sûrement déjà vu des popups : il y en de tous les genres. Avec ou sans la barre d'adresse, avec ou sans la barre d'outils, de tailles différentes...

Mais pour commencer, nous allons apprendre à ouvrir une popup simple, avec les paramètres par défaut du navigateur. Ceci n'est donc pas réellement une popup, mais un lien qui s'ouvre dans une nouvelle fenêtre.

Pour ouvrir un lien dans une nouvelle fenêtre, vous avez peut-être déjà vu des codes qui utilisent l'attribut target dans le lien :
Code : HTML

1	<a href="http://www.google.fr/" target="_blank">Google</a>

Sachez que ce code fonctionne mais qu'il n'est pas valide XHTML.
C'est pour cela qu'il va falloir utiliser du Javascript.

Je vais vous expliquer un peu ce code

Code : HTML

1	<a href="http://www.google.fr/" onclick="window.open(this.href);return false;">Google</a>

Vous avez donc vu que j'ai rajouté dans la balise l'attribut onclick. Si on parle un minimum l'anglais, on comprendra que ça veut dire "quand on clique"

.
Dans cet attribut, nous avons window.open : encore une fois, window en anglais signifie fenêtre et open signifie ouvrir.
Ensuite, entre parenthèses, nous avons this.href. Le this désigne notre balise et href désigne l'attribut href de la balise.
this.href désignera donc http://www.google.fr/.

Donc en français, ça veut dire "quand on clique sur le lien, ouvrir dans une nouvelle fenêtre http://www.google.fr/".

Pour le return false, sachez juste que sans lui, le site Google s'ouvrirait dans la fenêtre en cours ET dans une nouvelle fenêtre.

Il empêche donc d'ouvrir le lien dans la fenêtre en cours pour que la page s'affiche uniquement sur la popup.

Notez que vous trouverez peut-être ce code :
Code : HTML

1	<a href="#" onclick="window.open('http://www.google.fr/');return false;">Google</a>

Mais le problème avec ce code, c'est que si le visiteur n'a pas activé le Javascript, le navigateur ira à l'ancre # et donc n'ouvrira pas la page voulue.
Alors qu'avec le code précédent, le navigateur n'ouvrira pas le lien dans une nouvelle fenêtre mais l'ouvrira quand même dans la fenêtre actuelle (en admettant qu'il n'ait pas activé le Javascript, bien entendu). Cela reste donc très pratique si l'on tient absolument à ce que le visiteur visite le site "Google"

Une popup plus complexe

Je vais maintenant vous apprendre à ouvrir de "vrais" popups.
Ceux qui font par exemple 100 par 100 pixels, et qui n'ont pas de barre d'adresse...

Pour commencer, nous allons reprendre le code précédent mais en y ajoutant quelques options :

Code : HTML

1	<a href="http://www.google.fr/" onclick="window.open(this.href,'nom_fenetre','parametres');return false;">Google</a>

Dans ce code nous remplacerons bien évidement nom_fenetre> par le nom que vous donnerez à votre popup.
Le nom n'est pas celui qui s'affichera dans la barre de titre ; celui qui s'affiche dans la barre de titre, c'est celui compris entre les balises <title>, vous vous souvenez ?

Ben il sert à quoi, alors ? o_O

Chaque popup que vous ouvrirez aura un nom différent, cela vous permettra de ne pas ouvrir deux fois le même ; pas mal, non ?
Ainsi, si vous ouvrez une popup nommé "kikou", et que le visiteur clique à nouveau sur le lien d'ouverture, la popup ne se réouvrira pas !
Si vous créez un deuxième lien ouvrant une popup complètement différent du premier mais avec le même nom, la deuxième viendra remplacer le premier.

Notez qu'il vaut mieux éviter tous les caractères spéciaux, espaces, etc. dans le nom de votre popup pour éviter tout problème.

Observez que les paramètres seront séparés par des virgules :

Code : HTML

1	<a href="http://www.google.fr/" onclick="window.open(this.href,'nom_fenetre','parametre1 , parametre2');return false;">Google</a>

C'est grâce à ces paramètres que vous pourrez faire en sorte que la barre d'adresse s'affiche ou non et où vous pourrez configurer votre popup comme vous le désirez.

Paramètres

Voici une brève description des paramètres que vous pouvez utiliser et des valeurs qu'ils peuvent prendre :

Citation : Paramètres

width : largeur de la fenêtre en pixels (exemple : 200).
height : hauteur de la fenêtre en pixels (exemple : 200).
status : afficher ou non la barre de statut du navigateur (yes / no).
directories : afficher ou non la barre des favoris (yes / no).
toolbar : afficher ou non la barre d'outils du navigateur (yes / no).
location : afficher ou non la barre d'adresse (yes / no).
menubar : afficher ou non la barre menu du navigateur (yes / no).
scrollbars : afficher ou non les scrollbars (yes / no).
resizable : possibilité de redimensionner la fenêtre (yes / no).
top : positionnement de la fenêtre à partir du haut en pixels (exemple : 100).
left : positionnement de la fenêtre à partir de la gauche en pixels (exemple : 100).

Cette seule citation ne vous permettra sûrement pas de comprendre comment utiliser ces fonctions dans votre code, nous allons donc prendre un exemple concret.

Ouvrir une popup de 500 par 500 pixels sans la barre d'adresse. C'est simple, avec ce code :

Code : HTML

1	<a href="http://www.google.fr/" onclick="window.open(this.href,'popup','height=500 , width=500 , location=no');return false;">Google</a>

Notez que définir une hauteur et une largeur désactive automatiquement la barre d'adresse, d'outils... sur la plupart des navigateurs.
Si vous désirez donc avoir une fenêtre de 500 par 500 pixels et avoir la barre d'adresse, il est préférable de préciser tous les paramètres ou du moins ceux qui vous importent le plus, avec la valeur qui vous convient

Récapitulons

onclick="window.open(this.href, 'nom_de_votre_popup', 'height=200, width=200, toolbar=no, location=yes');return false;"

Ici, cet attribut ajouté à la balise <a> ouvrira une popup de nom "nom_de_votre_popup", de taille 200 par 200 pixels, sans barre d'outils et avec une barre d'adresse.

Astuces

Popups et boutons

Il est également possible d'ouvrir des popups en cliquant sur un bouton.
Là encore, rien de compliqué, il suffit simplement de reprendre le code pour les liens et d'avoir un peu d'imagination :
Code : HTML

1
2
3

<a href="http://www.google.fr/" onclick="window.open(this.href);return false;">
<input type="button" value="Google" />
</a>

Il y a juste à remplacer le texte par le code d'un bouton.

Popups et images

Encore une fois rien de compliqué, on reprend le code précédent et on remplace le code du bouton par...
Secret (cliquez pour afficher)

le code de l'image !

Ça nous donne donc :
Code : HTML

1
2
3

<a href="http://www.google.fr/" onclick="window.open(this.href);return false;">
<img src="image/plage.jpg" alt="plage" />
</a>

Vous l'avez donc compris, on peut mettre un peu de tout dans notre lien, du moment que ce sont des balises du type inline.
Mais bon, à part images et boutons, je ne vois pas ce qu'on peut faire d'autre de très utile :euh:

Erreurs à ne pas faire

Je vais vous donner deux codes, un pour les boutons et un pour les images qui font la même chose que les deux précédents mais qu'il ne faut surtout pas utiliser, je vous expliquerai pourquoi après.

Code : HTML

1	<img src="images/plage.jpg" alt="plage" onclick="window.open('http://www.google.fr');" />

Code : HTML

1	<input type="button" value="Bouton" onclick="window.open('http://www.google.fr');" />

Ces deux codes provoquent donc l'ouverture d'une popup lorsque qu'on clique sur l'image ou le bouton.
Mais il ne faut pas les utiliser car si le Javascript n'est pas activé chez le visiteur, rien ne se passera lors du clic sur l'image ou le bouton ; alors qu'avec les deux premiers codes donnés, si le navigateur ne supporte pas le Javascript ou qu'il n'est pas activé, il se contentera de suivre la cible du lien sans ouvrir de nouvelle fenêtre et la page sera tout de même visitable.

Ouvrir une popup automatiquement

Ah, vous l'attendiez, cette partie !
Je n'étais pas trop pour au début, mais après tout, ça peut être fait sans abus, et puis de toute façon vous auriez trouvé sur Google...

Je vais commencer avec une peu de code :
Code : HTML

1
2
3

<script type="text/javascript">
//nous placerons ici le code d'ouverture.
</script>

Voici donc des balises <script>, elles nous permettent de placer des... scripts ! L'attribut type indique au navigateur qu'il s'agit de Javascript.
Vous trouverez peut-être dans certains codes sur Internet, un attribut language à la place de type, c'est pareil sauf que language n'est plus aux normes, utilisez donc le code que je vous donne

.

Dans les parties précédentes, nous avions vu du Javascript placé dans l'attribut onclick, le voici :
Code : JavaScript

1	window.open(this.href);

Placé dans l'attribut onclick, la popup s'ouvrait lors du clic, placé entre les balises <script>, il s'ouvrira tout seul.

Je suis sûr que vous vous êtes déjà jetés sur vos Bloc-notes, puis en commençant à taper tout ça, vous vous êtes rendu compte qu'il y avait un problème : où met-on l'adresse ?
STOOOP ! On ne met pas d'attribut href à la balise <script> ! Non mais où ça s'est vu, ça ?!
On va remplacer le this.href par l'adresse de la page :
Code : HTML

1
2
3

<script type="text/javascript">
window.open('http://www.google.fr/');
</script>

Bon pour la taille, les barres, je vous laisse faire, vous êtes grands maintenant !

1) Merci de ne pas en abuser.
2) Les popups ouvertes de cette manière ne s'ouvriront quasiment jamais car tous les navigateurs ont des anti-popup, prévoyez donc une possibilité de les ouvrir avec un lien.

La touche CSS

On me l'a proposé dans les commentaires, et ce n'est pas bête du tout : indiquer grâce à une petite image que la fenêtre est une popup, comme sur le SdZ : Image utilisateur

.

On va donc ajouter à notre popup un attribut class ayant la valeur popup, et un peu de CSS

.

Code : HTML

1	<a href="http://www.google.fr/" onclick="window.open(this.href);return false;" class="popup">Google</a>

Code : CSS

.popup{
/* Une petite marge intérieure à droite afin que l'image ne se retrouve pas sous le texte */
padding-right:20px;
/* Et on met notre image de fond, centrée à droite et qui ne se répète pas */
background:url(http://www.siteduzero.com/Templates/images/designs/1/zcode/popup.png) center right no-repeat;
}

Et nous obtenons le résultat suivant : Google Image utilisateur

Voilà, vous savez désormais ouvrir des popups !

Vous avez sûrement tous déjà souffert des popups à un moment ou à un autre, c'est pourquoi je vous demande d'utiliser ce système sans abus, tout en laissant votre site accessible aux personnes dont le navigateur ne supporte pas le Javascript ou l'ayant désactivé, comme je vous l'ai appris.

N'hésitez surtout pas à me poser des questions par message privé, j'y répondrai avec plaisir.
Si vous avez d'autres idées concernant les popups que celles proposées dans le tuto, vous pouvez également m'en faire part, je me ferai un plaisir de les ajouter.

Auteur : Jimluiz
Noter et commenter ce tutoriel
Imprimer ce tutoriel