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

 

 

Les recherches qui vous ont mené ici

  • afficher une popup en javascript (7)
  • afficher un formulaire en popup (1)
  • ouvrir une fenetre avec jquery (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 :
ymlp
Autorépondeur : une alternative gratuite et en français à AWeber.

Vous êtes à la recherche d'un autorépondeur pour créer une mailing list à partir de votre blog. Vous souhaitez lancer une NewsLetter...

enjoy-css
Les 7 meilleurs générateurs css3 en ligne

Depuis CSS3, les feuilles de style ont révolutionné la création des sites web : des coins arrondis, des gradients, des transitions,...

html-en-pdf
8 sites pour convertir des pages HTML en PDF.

Convertir en ligne un site web en HTML en un fichier PDF à partir d'une adresse url, c'est possible et...

Fermer