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 :

<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 code du lien HTML d’appel de la fonction avec un faux lien onClick :

a href="" onClick="ouvrirFenetre('http://outils-web.fr/fichiers/popup.html');"> Ouvrir le popup </a>

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

<a href="javascript:ouvrirFenetre('http://outils-web.fr/fichiers/popup.html');"> 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 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

 

 



En relation avec cet article

Add a Comment

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

Lire plus :
nombre d'articles publies
Comment afficher le nombre d’articles publiés sur WordPress ?

Voici un petit tutoriel expliquant comment indiquer à vos visiteurs le nombre d'articles publiés sur votre blog Wordpress. Tout est...

you tube
5 astuces incontournables pour You Tube

Avec YouTube tout est possible !? Savez-vous que les adresses des vidéos YouTube offrent une multitudes de possibilités, sans rien...

décoder liens
7 sites et 2 extensions pour décoder et vérifier des liens courts.

250 milles comptes Twitter hackés récemment. Il s'agissait de liens courts dans des messages personnels. Les liens courts peuvent être...

Fermer