|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Qu'est
ce qu'une popup ?
Les
options d'affichage
Une
popup à l'ouverture / fermeture d'une
page
Fermer
une popup
Centrer
une popup dans la page
Une
popup en plein écran
Communiquer
avec la fenêtre appelante |
|
1. Qu'est
ce qu'une popup ?
Une popup est en fait un document classique
HTML qu'on ouvre en assignant des paramètres
tels que la largeur, la hauteur, etc...
L'ouverture de ce document est déclenchée
par un événement utilisateur
ou Event-Handler : (clic, ouverture de site,
minuterie, ...) via une seule ligne de code
javascript.
La popup est ouvert grâce à la
méthode (ou fonction) appelée
sur l'objet window.
Cette fonction attend 3 paramètres
: window.open(page,nom,options)
• 'page' contient l'url du document
HTML
• 'nom' contient le nom de la popup
- paramètre facultatif
• 'option' est une chaîne
de caractère contenant les options
de paramétrage de la popup.
Exemple :
|
<a
href="#" onClick="window.open('toto.html','test','width=450,height=215,scrollbars=no')">
Cliquez-ici
</a> |
Dans
cet exemple, le fichier à charger en
popup se nomme toto.html.
Le nom de la fenêtre s'appelle test.
On spécifie une largeur
de 450 px, une hauteur
de 215 px et on demande aucune
barre de scroll.
Essai : |
 |
2. Les
options d'affichage
Le dernier paramètre contient une chaîne
d'options d'affichage.
Chaque option est séparée par
une 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
scroll |
yes | no | auto |
| resizable |
Autorise le redimensionnement |
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 |
|
|
3. Une
popup à l'ouverture / fermeture d'une
page
Pour ouvrir une popup à l'ouverture
d'une page, ajoutez dans la balise <BODY>
l'événement :
<BODY onLoad="OuvrirPopup('page.html','nom','options...')">
De la même manière, pour ouvrir
un popup à la fermeture de la page,
remplacer l'événement onload
par onunload.
<BODY onunLoad="OuvrirPopup('page.html','nom','options...')">
|
|
| |
4. Fermer
une popup
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 de la popup par window.open.
Voici le code Javascript :
<SCRIPT language="javascript">
var w;
function Ouvrir() {
w=window.open("popup/popup.htm","pop1","width=300,height=250");
}
function Fermer() {
if (w.document) { w.close(); }
}
</SCRIPT>
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 la popup avec la méthode
close().
Exemple :
 
|
|
| |
5. Centrer
une popup
Cette technique permet de centrer une popup
quelle que soit la taille de votre écran.
Pour cela, on détermine la largeur
et la hauteur de l'écran avec les instructions
screen.width
et screen.height.
Voici le code Javascript :
<script language="JavaScript">
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);
}
</script>
Voici le code du lien : |
<a href='javascript:PopupCentrer
("popup.htm",300,250,",scrollbars=no,statusbar=no")'>
Cliquez sur ce lien</a>
|
|
6. Une
popup en plein écran
Vous pouvez ouvrir une popup en plein écran
en rajoutant l'option fullscreen=yes
Il vous suffira d'effectuer un ALT + F4 pour
la refermer.
|
| |
7. Communiquer
avec la fenêtre appelante
Depuis la 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
de la 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.
|
| |
|
|
|
|
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
