Ouvrir un popup en un clic avec Javascript

Les popups peuvent être utile pour afficher une information, une pub, un formulaire et bien d’autres choses. Il existe de nombreuses méthodes pour afficher des popups. Dans cet article nous allons créer des popups en « dur », les plus simples à ouvrir.
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. Le code JavaScript pour l’ouverture au clic de souris sera donc :

         onClick »window.open(‘…’);« 

  • 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, on peut plus simplement utiliser un lien JavaScript qui s’écrit de la façon suivante : <a href= »javascript:« code à exécuter »>texte à cliquer</a>

Les différents attributs de la méthode open() sont rassemblés 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. Deux exemples d’utilisation :

  • Ouverture d’un popup window directement depuis le lien.

Le code ci-dessous ouvre popup simple 500×350 à 200 du haut de page et 200 de la bordure gauche, avec onClick :

<a href="" onClick="window.open('http://outils-web.fr/fichiers/popup.html','mon_popup','toolbar=1,location=1,directories=1,status=1,scrollbars=1,resizable=1,copyhistory=1,width=500,height=350,screenX=200,screenY=200');"> Ouvrir le popup </a>

Le code suivant utilise une lien Javascript pour ouvrir le popup :

<a href="javascript:window.open('http://outils-web.fr/fichiers/popup.html','mon_popup','toolbar=1,location=1,directories=1,status=1,scrollbars=1,resizable=1,copyhistory=1,width=500,height=350,screenX=200,screenY=200');"> Ouvrir le popup </a>
  • Ouverture d’un popup window en utilisant une fonction JavaScript.

Ici, on va utiliser une fonction JavaScript ouvrirFenetre() qui sera appelée lorsqu’on cliquera sur le lien.

Le code de la fonction appelée :

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

<a href="" onClick="ouvrirFenetre();"> Ouvrir le popup </a>

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

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

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 un popup windows tout en chargeant une nouvelles page.

3. Test des exemples

Les différents exemples sont présentés ci-dessous :

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.

Les recherches qui vous ont mené ici

  • afficher une popup en javascript (7)
  • afficher un formulaire en popup (1)
  • afficher un text dans un pop onclick lien (1)
Ces articles pourraient vous intéresser :

Add a Comment

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

Lire plus :
piskel
Piskel : Créez des sprites animés professionnels en ligne

Si vous voulez créer des sprites en pixel art pour vos jeux. Des sprites animés professionnels comme on en trouve dans...

acid3 test css3 navigateur
Testez la compatibilité CSS3 et HTML5 de votre navigateur.

Pour profiter pleinement de toutes les nouveautés de HTML5 et CSS3, il est important d'avoir un bon navigateur web et...

fix win
Réparer Windows avec un petit freeware

La semaine dernière, il m'est arrivé une fâcheuse aventure. Après une mauvaise manipulation, l'icône du lecteur DVD de mon ordinateur...

Fermer