Retourner � la page d'accueil de TJSRetourner � la page d'accueil de TJS

JavaScript et les popups

C'est quoi un popup ?

Le mot popup peut tre traduit par fentre surgissante. L'ouverture de cette fentre est dclenche par un vnement utilisateur (clic, ouverture de site, minuterie, ...) via une seule ligne de code JavaScript. Un popup est ouvert grce la mthode (ou fonction) open() appele sur l'objet window. Cette fonction attend 3 paramtres :
window.open( page [,nom] [,options] )

Les trois paramtres sont des chanes de caractres.
- page contient l'adresse de la page afficher.
- nom contient le nom du popup qui va tre ouvert. Non obligatoire.
- options est une chane de caractres contenant les options de paramtrage du popup. Non obligatoire.
Les 2 derniers paramtres 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 dclaration la fonction popupBasique() :

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

Voici le rsultat 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 3me paramtre de open().

Les options d'affichage

Il est possible grce au second paramtre d'affecter un nom au popup ouvert. Ainsi les autres popups seront ouverts dans le mme popup. Cela vite d'envahir l'cran du visiteur avec de multiples fentres. Pour remettre le popup en premier plan, voir la page "Aller plus loin".

Sans le paramtre nom, un nouveau popup est ouvert chaque fois.

Le dernier paramtre contient une chane d'options d'affichage. Chaque option est spare par une virgule ( ne pas confondre avec la syntaxe des feuilles de style qui demande un point-virgule). Voici la liste des options :

Proprits 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 fentre
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 rlle et volontaire de l'utilisateur.

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

De manire gnrale, vitez leur utilisation car l'ouverture d'un popup n'est jamais garantie. Si des fonctionnalits importantes sont dportes dans un popup qui ne s'ouvrira pas, vous perdez des interactions avec votre audience, vous gnrez de la frustration et des demandes de SAV.

Quelques usages sur les popups

Voici quelques exemples d'usage de popup.

Crer un popup tout en JavaScript

Il est possible de crer un popup sans utiliser une page pr-existante mais simplement en la gnrant 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="Gnrer le popup" onclick="popup()">
</form>

Et la fonction JavaScript qui ouvre le popup et crit dans le document de la fentre 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 fentre 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 gnr. Pour cela, il est ncessaire de conserver dans une variable globale le rsultat 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 premire ligne var w dclare la variable globale.
Dans la fonction Ouvrir, w reoit le rsultat 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 mthode 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 mme nom

Vous avez peut tre remarqu qu'un popup qui s'ouvre dans un popup de mme nom dj ouvert reste cach. Voici la solution pour replacer le popup en premier plan.
Ouvrir un popup qui rapparat 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 fentre aprs 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 fentre appelante

Depuis le popup il est possible d'atteindre l'objet window de la fentre appelante grce window.opener. On peut ainsi modifier le contenu de la fentre appelante ou rcuprer des informations du popup pour les replacer dans un formulaire de la fentre appelante.

Cet exemple permet de placer la slection 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

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 24/07/2024 23:17:12 sur php 7 en 21.41 ms