JavaScript et les popups

C'est quoi un popup ?

Le mot popup peut être traduit par fenêtre surgissante. L'ouverture de cette fenêtre est déclenchée par un événement utilisateur (clic, ouverture de site, minuterie, ...) via une seule ligne de code JavaScript. Un popup est ouvert grâce à la méthode (ou fonction) open() appelée sur l'objet window. Cette fonction attend 3 paramètres :

window.open( page [,nom] [,options] )

Les trois paramètres sont des chaînes de caractères.
- page contient l'adresse de la page à afficher.
- nom contient le nom du popup qui va être ouvert. Non obligatoire.
- options est une chaîne de caractères contenant les options de paramétrage du popup. Non obligatoire.
Les 2 derniers paramètres ne sont pas indispensables.

Pour ouvrir un popup sur un lien, voici la syntaxe HTML :

<a href="javascript:popupBasique('popup.html')">Ouverture popup basique</a>

avec comme déclaration la fonction popupBasique() :

function popupBasique(page) {
  window.open(page);
}

Voici le résultat de ce lien :

Selon la configuration de votre navigateur, le popup s'ouvre parfois dans un nouvel onglet de navigation. Pour s'assurer d'ouvrir un vrai popup, il faut configurer l'affichage avec le 3ème paramètre de open().

Les options d'affichage

Il est possible grâce au second paramètre d'affecter un nom au popup ouvert. Ainsi les autres popups seront ouverts dans le même popup. Cela évite d'envahir l'écran du visiteur avec de multiples fenêtres. Pour remettre le popup en premier plan, voir la page "Aller plus loin".

Sans le paramètre nom, un nouveau popup est ouvert à chaque fois.

Le dernier paramètre contient une chaîne d'options d'affichage. Chaque option est séparée par une virgule (à ne pas confondre avec la syntaxe des feuilles de style qui demande un point-virgule). Voici la liste des options :

Propriétés	Effets	Valeurs possibles
directories	Affichage de la barre de liens	yes | no
menubar	Affichage de la barre de menu	yes | no
status	Affichage de la barre de statut	yes | no
location	Affichage de la zone d'adresse	yes | no
scrollbars	Affichage des barres de scrolling	yes | no | auto
resizable	Autorise le redimensionnement du popup	yes | no
height	Hauteur en pixels	nombre entier
width	Largeur en pixels	nombre entier
left	Position horizontale en pixels sur l'écran	nombre entier
top	Position verticale en pixels sur l'écran	nombre entier
fullscreen	Popup en plein écran (version 5 et +)	yes | no

Quelques exemples de combinaisons d'options

Popup positionné
Position fixe en haut à gauche

OuvrirPopup('popup.html','','top=10,left=10')

Popup minimaliste
Aucune barre de menu, non redimensionnable, taille fixe

OuvrirPopup('popup.html', '', 'resizable=no, location=no, width=200, height=100, menubar=no, status=no, scrollbars=no, menubar=no')

Popup fullscreen
Page en plein écran (version 5 et +). Faire un ALT [F4] pour fermer la fenêtre

OuvrirPopup('popup.html','','fullscreen=yes')

Voici la fonction JavaScript qui ouvre un popup pour tous ces exemples :

function OuvrirPopup(page, nom, option) {
  window.open(page, nom, option);
}

A vous de tester :
Placez les options dans la zone de texte et ouvrez le popup associé

Evitez les popups

Les visiteurs n'aiment pas les popups. Les navigateurs n'autorisent donc leur ouverture que sur une action réélle et volontaire de l'utilisateur.

Un popup qui devrait s'ouvrir automatiquement au chargement d'une page sera ignoré par le navigateur.

De manière générale, évitez leur utilisation car l'ouverture d'un popup n'est jamais garantie. Si des fonctionnalités importantes sont déportées dans un popup qui ne s'ouvrira pas, vous perdez des interactions avec votre audience, vous générez de la frustration et des demandes de SAV.

Quelques usages sur les popups

Voici quelques exemples d'usage de popup.

Créer un popup tout en JavaScript

Il est possible de créer un popup sans utiliser une page pré-existante mais simplement en la générant depuis la page appelante, via du JavaScript.

Voici un exemple :

<form name="f_popup">
  <p>Le Popup aura pour titre : <input type='text' value='Tout JavaScript.com' name="titre">
  <p>Vous pouvez mettre votre nom : <input type='text' value='Visiteur' name="nom">
  <p><input type="button" value="Générer le popup" onclick="popup()">
</form>

Et la fonction JavaScript qui ouvre le popup et écrit dans le document de la fenêtre w ouverte :

function popup() {
  // ouvre une fenetre sans barre d'etat, ni d'ascenceur
  w=open("",'popup','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes');	
  w.document.write("<title>"+document.forms["f_popup"].elements["titre"].value+"</title>");
  w.document.write("<body> Bonjour "+document.forms["f_popup"].elements["nom"].value+"<br><br>");
  w.document.write("Ce popup n'est pas un fichier HTML, ");
  w.document.write("il est écrit directement par la fenêtre appelante");
  w.document.write("</body>");
  w.document.close();
}

Testez l'affichage du popup avec le formulaire :

Fermer un popup depuis la page ouvrante

Il peut être utile de pouvoir fermer un popup depuis la page qui l'a généré. Pour cela, il est nécessaire de conserver dans une variable globale le résultat de l'ouverture du popup par window.open.

var w;
function Ouvrir() {
  w=window.open("popup.html","pop1","width=200,height=200");
}
function Fermer() {
  if (w.document) {  
    w.close(); 
  }
}

La première ligne var w déclare la variable globale.
Dans la fonction Ouvrir, w reçoit le résultat de window.open.
Dans la fonction Fermer, on teste si w est bien un objet de type window; si oui, on ferme le popup avec la méthode close().

Les 2 liens pour ouvrir et fermer le popup :

<a href="javascript:Ouvrir()">Ouvrir le popup</a> 
|
<a href="javascript:Fermer()">Fermer le popup</a>

Ce qui donne :

Popups multiples ayant le même nom

Vous avez peut être remarqué qu'un popup qui s'ouvre dans un popup de même nom déjà ouvert reste caché. Voici la solution pour replacer le popup en premier plan.
Ouvrir un popup qui réapparaît au premier plan
Voici le code source :

function OuvrirVisible() {
  var w=window.open("popup.html","pop1","width=200,height=200");
  w.document.close();
  w.focus();
}

Le principe est donc de rendre le focus à la fenêtre après son ouverture.

Centrer un popup

Voici comment ouvrir un popup centré sur l'écran

function PopupCentrer(page, largeur, hauteur, options) {
  var top=(screen.height-hauteur)/2;
  var left=(screen.width-largeur)/2;
  window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}

Ce lien ouvre un popup centré de 300 par 150 pixels :

<a href="javascript:PopupCentrer('popup.html',300,150,'menubar=no,status=no')">popup centré de 300 par 150 pixels</a>

Que vous pouvez tester ici :

Communiquer avec la fenêtre appelante

Depuis le popup il est possible d'atteindre l'objet window de la fenêtre appelante grâce à window.opener. On peut ainsi modifier le contenu de la fenêtre appelante ou récupérer des informations du popup pour les replacer dans un formulaire de la fenêtre appelante.

Cet exemple permet de placer la sélection dans le champ choix du formulaire origine.

<form name='origine'>
	<p><input type="button" value="Ouvrir le popup" onClick="OuvrirPopup('popchoix.html','popupchoix','width=300,height=150,menubar=no,status=no')">
	<p>Votre choix dans le popup est : <input type="text" name="choix" disabled></p>
</form>

Le formulaire apparait :

La fonction de retour de l'information depuis le popup vers cette page ouvrante est :

function Reporter(l) {
  var choix=l.options[l.options.selectedIndex].value;
  window.opener.document.forms["origine"].elements["choix"].value=choix;
}