Retourner à la page d'accueil de TJS

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 :

Emulation de la console

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 :

Emulation de la console

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 :

Emulation de la console

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 :

Emulation de la console

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 :

Emulation de la console

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;
}
Tutoriel écrit par webmaster mis à jour le

Chercher une fonction, un objet, ...

Le 18/10/2017 20:31:48 sur php7 en 14.33 ms