Ouvrir un popup en un clic avec Javascript

Un pop up dans une fenêtre, c’est pas compliqué !

Vous voulez ouvrir une fenêtre sans attribut pour afficher une information, une pub, un formulaire et bien d’autres choses. C’est facile. Oui vraiment.
popup window

1. Quelques notions de JavaScript.

  • Pour ouvrir  notre fenêtre en JavaScript, nous allons utiliser la méthode open() de l’objet window. L’écriture en JavaScript est la suivante : window.open(‘…’);
  • Pour déclencher l’ouverture de la fenêtre popup, on utilisera l’événement JavaScript onClick, qui correspond au clic gauche de la souris, le clic normal. ce qui s’écrit :

onClick=″ window.open(‘…’); ″ remarquez les guillemets différents

  • Il ne reste plus qu’à donner des attributs à la méthode open(), pour paramétrer la fenêtre popup voulue, de la façon suivante :

onClick=″ window.open(http://lien/popup.html’,’nompopup’,’attib1,attib2,attrib3,…); ″

  • Plutôt que de dénaturer un lien avec un onclick pas très rigoureux, on peut simplement utiliser un lien JavaScript qui s’écrit de la façon suivante : <a href= »javascript:« code à exécuter »>texte à cliquer</a>

Voilà, on a fini. Enfin presque 🙂

Pour personnaliser sa fenêtre il faut lui donner des attributs. Pour vous en souvenir, j’ai regroupé tout ça dans  le tableau ci-dessous :

Attributs Effets
toolbar= 1 ou 0 Affichage de la barre d’outils
location=1 ou 0 Affichage du champ d’adresse
directories=1 ou Affichage des boutons d’accès rapide
status=1 ou 0 Affichage de la barre d’état
menubar=1 ou 0 Affichage de la barre de menus
scrollbars=1 ou 0 Affichage des barres de défilement.
resizable=1 ou 0 redimensinnable ou non
width=x en pixels Largeur de la fenêtre en pixels
height=y en pixels Hauteur de la fenêtre en pixels
screenX=200 en pixels position par rapport au bord gauche en pixels
screenY=200 en pixels position par rapport au haut de page en pixels

Les valeurs 1 ou 0, peuvent être remplacées par no ou yes

Ces attributs ne sont pas pris en charge par tous les navigateurs, à vous de tester.

2. On passe à l’action !

On va utiliser une fonction JavaScript  qu’on va appeler de façon originale : ouvrirFenetre()

Le code de la fonction :

[pastacode lang= »javascript » manual= »%3Cscript%20language%3D%22javascript%22%3E%0Afunction%20ouvrirFenetre(url)%7B%0A%20var%20win%20%3D%20window.open(url%2C%20%22popup%22%2C%20%22toolbar%3D0%2C%20location%3D0%2C%20directories%3D0%2C%20status%3D0%2C%20scrollbars%3D0%2C%20resizable%3D0%2C%20copyhistory%3D0%2C%20width%3D500%2C%20height%3D350%2CscreenX%3D200%2CscreenY%3D200%22)%3B%0A%20win.focus()%3B%0A%20%7D%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Le code du lien HTML d’appel de la fonction avec un faux lien onClick :

[pastacode lang= »markup » manual= »a%20href%3D%22%22%20onClick%3D%22ouvrirFenetre(‘http%3A%2F%2Foutils-web.fr%2Ffichiers%2Fpopup.html’)%3B%22%3E%20Ouvrir%20le%20popup%20%3C%2Fa%3E%0A » message= » » highlight= » » provider= »manual »/]

Le même lien d’appel de la fonction avec un lien Javascript :

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22javascript%3AouvrirFenetre(‘http%3A%2F%2Foutils-web.fr%2Ffichiers%2Fpopup.html’)%3B%22%3E%20Ouvrir%20le%20popup%20%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

Pour ouvrir plusieurs popup, il faut réécrire window.open(…);  mais la plupart des navigateurs, les fenêtres multiples, pour des raisons évidentes.

Enfin, si vous renseignez une url après href, vous ouvrirez une popup windows tout en chargeant une nouvelle page.

3. Le test de vérité

Si ça ne marche plus, dites-le moi en commentaire. Les mises à jour qui foirent tout ça existe.

Soulevez l’index de la main droite et cliquez sur les liens :

J’espère que ces petits bouts de code vous auront fait progresser dans vos projets.

Bien sûr, d’autres popups existent. Comme par exemple les popup jQuery.

N’hésitez pas à partager cet article ou à le télécharger au format pdf :

L’article en PDF

 

 

Add a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Read more:
infobulles
Des tooltips ou info-bulles en css3 : 3 méthodes simples

Les Tooltips ou info-bulles sont de petites bulles informatives qui apparaissent au passage de la souris sur des liens ou...

duel quiz
Duel Quiz : l’appli android pour tester votre culture

Duel Quiz une appli androïd pour tester votre culture. Décidément, les applications mobiles de Quiz pour portables sont à la...

Promotion twitter
Faites votre promotion sur twitter, avec click to tweet

Ce petit article présente un moyen simple et amusant de faire votre promotion sur twitter, par l'intermédiaire de vos visiteurs....

Close