Ouvrir une fenêtre en pop-up :
La fonction Javascript qui permet d’ouvrir une fenêtre en pop-up est la fonction open().

Cette fonction a trois propriétés :
- une url, celle de la page à ouvrir
- un nom qui est celui qui sera donné à la fenêtre ouverte et qui permettra de la manipuler (ce nom ne doit pas contenir de majuscule, espace, tiret, caractères spéciaux ou caractères accentués).
- les attributs de la fenêtre (ceux-ci doivent être écrits à la suite, séparés par des virgules et sans aucun espace, aucun des attributs n’est obligatoire).

Les attributs de fenêtre :
width : largeur de la fenêtre.
height : hauteur de la fenêtre.
top : position de la fenêtre par rapport au haut de l’écran.
left : position de la fenêtre par rapport au bord gauche de l’écran.
toolbar : 1 ou yes pour afficher la barre d’outils du navigateur, 0 ou no pour la cacher.
menubar : 1 ou yes pour afficher la barre de menu du navigateur, 0 ou no pour la cacher.
location : 1 ou yes pour afficher la barres d’adresse du navigateur, 0 ou no pour la cacher.
scrollbars : 1 ou yes pour afficher les ascenseurs du navigateur, 0 ou no pour les cacher.
resizable : 1 ou yes pour autoriser le dimensionnement de la fenêtre, 0 ou no pour l’interdire.
directories : 1 ou yes pour afficher la barre des liens, 0 ou no pour la cacher.
status : 1 ou yes pour afficher la barre d’état, 0 ou no pour la cacher.
fullscrenn: 1 ou yes pour mettre la fenêtre en plein écran.
channelmode: 1 ou yes pour mettre la fenêtre en plein écran avec raccourcis de barre d'outil.

Exemple :
Code Modèle:
<a href="#" onclick="window.open('page.html','nom','toolbar=0,menubar=0,location=0,scrollbars=1,width=400,height=300')">lien</a>

A partir du Code Modèle:
- remplacer lien par le mot voulu.
- remplacer page.html par le nom de la page htm avec son chemin.
- mettre les bonnes dimensions (width - height).
- enlever les ascenseurs (scrollbars=0) ou les laisser si nécessaire (scrollbars=1).

La page htm ne contient que l'image placée dans le coin haut/gauche. (marges 0)

Ce qui donnera par exemple:
<a href="#" onclick="window.open(' pop_up.htm','nom','toolbar=0,menubar=0,location=0,scrollbars=1,width=333,height=495')"> carte</a>

Ce code est à placer sur le lien qui appelle le pop-up !

Un pop-up qui se ferme dès qu'on clique en dehors de lui :
Cela évite la multiplication des fenêtres, et empêche le pop-up de disparaître derrière la page ouverte dessous, puisqu'elle se ferme automatiquement.
Pour que la page soit valide W3C, il faut définir le comportement dans un fichier javascript à inclure dans le head de la page.

window.onblur = function() {
// Action à faire
}

Ce qui donne si l'action à faire est de refermer la fenêtre du pop-up :

<script type="text/javascript">
<!--
window.onblur = function() {
window.close()
}
//-->
</script>

Un pop-up toujours en premier plan :
Attention, dans ce cas, on ne peut pas cliquer sur la page qui est dessous, tant qu'on n'a pas refermé le pop-up.
Le focus permet de déterminer la fenêtre active. En utilisant le comportement onblur (action lorsque l'utilisateur quitte un élément qui était activé), il est possible de forcer une fenêtre pop-up à rester toujours en premier plan.
Pour que la page soit valide W3C, il faut définir le comportement dans un fichier javascript à inclure dans le head de la page.

<script type="text/javascript">
<!--
window.onblur = function() {
self.focus()
}
//-->
</script>

Placer juste une image dans le pop-up :
Si on veut placer juste une image dans le pop-up (et non pas une page html), c'est possible, mais attention, cette image ne restera pas au premier plan si on clique dans la page.

Exemple :
Code Modèle:
<a href="#" onclick="window.open('img.jpg','nom','toolbar=0,menubar=0,location=0,scrollbars=0,width=400,height=300')">lien</a>

A partir du Code Modèle:
- remplacer lien par le mot voulu.
- remplacer img.jpg par le nom de l'image avec son chemin.
- mettre les bonnes dimensions (width - height).
- Sans ascenseurs (scrollbars=0) / avec ascenseurs (scrollbars=1)

Ce qui donnera par exemple:
<a href="#" onclick="window.open('photo.jpg','nom','toolbar=0,menubar=0,location=0,scrollbars=0,width=350,height=500')">photo</a>

Pop-up qui ne fait pas remonter la page :
Question:
Lorsque un pop-up s'ouvre après avoir été activé par un lien situé en milieu de page par exemple, comment faire pour que le navigateur ne remonte systématiquement pas en début de page ?

Réponse:
Un lien commençant par un # fait appel à une ancre.
Si rien n'est spécifié, ça remonte en haut de page !

Il faut remplacer href="#" par href="javascript:void(0);"

EXEMPLE:
<a href="#" onclick="window.open…………..
doit être remplacé par:
<a href="javascript:void(0);" onclick="window.open

Ce code est à placer sur le lien qui appelle le pop-up !

Fermer un pop-up :
Si la fonction open() permet d’ouvrir des pop-up, la fonction close() permet de les fermer.
Dans un pop-up, on peut placer un lien pour fermer ce pop-up :
Code:
<a href="#" onclick="window.close()">fermer la fenêtre</a>

Ecrit le 24 février 2006.