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 un formulaire en popup (1)
  • afficher un text dans un pop onclick lien (1)
  • code js ouverture video sur bouton (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 :
animation stop motion
Le meilleur freeware pour créer des animations image par image [Stop Motion]

Créer son propre propre film d'animation image par image, c'est possible et même très simple grâce à un petit logiciel gratuit. En quelques...

galaxie
Tutoriel : créer un effet de parallaxe avec jQuery

Vous avez certainement déjà visité un site en une seule page ou les articles se succèdent les uns à la...

brute avec visage de femme
Face in hole : placez votre visage dans le trou d’une image.

Vous connaissez le principe du "face in hole" : placer son visage dans le trou fait au niveau du visage...

Fermer