Programmation

Créer une popup 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 à l’intérieur et à l’extérieur)

  • 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(‘/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 ajuter 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 0 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 : 

1
2
3
4
5
6
<script language="javascript">
function ouvrirFenetre(url){
 var win = window.open(url, "popup", "toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, width=500, height=350,screenX=200,screenY=200");
 win.focus();
 }
</script>

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

1
2
3
<a href="" onClick="ouvrirFenetre('/fichiers/popup.html');"> Ouvrir le popup </a>

<a href="javascript:ouvrirFenetre('/fichiers/popup.html');"> Ouvrir le popup </a>

Pour ouvrir plusieurs popup, il ajouter un autre window.open(…);  mais la plupart des navigateurs bloquent les fenêtres multiples, pour des raisons de sécurité.

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 :

Ouvrir une pop up avec la fonction ouvrirFenetre()

Avec un faux lien : Ouvrir le popup

Avec un lien JavaScript : Ouvrir le popup

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.

A bientôt sur Outils Web

Partager