pictavie.net - Tutorial - Ouverture d'une fenêtre 'pop-up'

Ouverture d'une fenêtre 'pop-up'

L'ouverture d'une fenêtre pop-up se fait par le biais d'un simple lien qui pointe vers une page HTML au travers d'un commande écrite en langage javascript. Cette commande a pour but de définir les caractéristiques de la fenêtre à ouvrir.

Créez d'abord, dans votre page HTML, le javascript (les 2 lignes de la fonction open() doivent être sur une seule et même ligne de texte) dans lequel les opérandes suivant signifient :

urlInfo = nom de la page qui s'affichera dans la fenêtre,
info = nom de la fenêtre,
toolbar = visualisation (1) ou non (0) de la barre d'adresses,
location = visualisation (1) ou non (0) du bouton OK,
directories = visualisation (1) ou non (0) de la barre des liens,
status = visualisation (1) ou non (0) de la barre d'état,
scrollbars = visualisation (1) ou non (0) des ascenseurs,
resizable = redimensionnement (1) ou non (0) de la fenêtre,
copyhistory = consultation (1) ou non (0) de la liste des pages Web récemment visitées,
menubar = visualisation (1) ou non (0) de la barre des commandes,
width et height = largeur et hauteur de la fenêtre en pixels,
top et left = positionnement de la fenêtre en pixels.

<BODY>
...
<SCRIPT type="text/javascript">
<!--
function def(numero) {
    urlInfo = 'page-' + numero + '.htm';
    open(urlInfo,'popup','toolbar=0,location=0,directories=0,status=0,menubar=0,
         scrollbars=0,resizable=0,width=300,height=210,left=250,top=150');
    }
-->
</SCRIPT>
...
</BODY>

La fonction ci-dessus a pour objet d'ouvrir une fenêtre (arbitrairement nommée popup) définie par son numéro. Ainsi, la concaténation des éléments de urlInfo permettra d'ouvrir dans une fenêtre de dimension 300 x 210, des éléments appelés 'page-25.htm', 'page-26.htm', etc.

Créez maintenant votre lien dans votre page HTML principale :

<BODY>
...
lien vers la <A href="javascript:def('25')">fenêtre</A> portant le numéro 25.
...
</BODY>

Créez enfin la page HTML 'page-25.htm' (à noter que la commande onLoad, ainsi libellée, vous permet de toujours afficher la fenêtre au premier plan). La fonction javascript this.close() permet d'afficher un lien ayant pour tâche de fermer la fenêtre pop-up :

<BODY onLoad="this.focus();">
<P align="center">Voici le contenu de l'exemple <B>page-25.htm</B><BR>
et je suis très content du résultat !<BR>
<BR>
<BR>
<BR>
<A href="javascript:this.close();">fermer cette fenêtre</A></P>
</BODY>

Exemple : lien vers la fenêtre portant le numéro 25.

Si vous souhaitez avoir un bouton de fermeture dans votre fenêtre, il vous suffit de modifier votre page comme suit :

<BODY onLoad="this.focus();">
<P align="center">Et voilà le contenu de l'exemple <B>page-26.htm</B><BR>
et je suis toujours très content du résultat !<BR>
<BR>
<BR>
<BR>
<FORM><INPUT type='button' value='Fermez-moi !' onClick='window.close();'></FORM>
</BODY>

Exemple : lien vers la fenêtre portant le numéro 26.

Bien entendu, vous pouvez directement ouvrir une fenêtre popup sans passer par une fonction :

<BODY onLoad="this.focus();">
<P align="center">Ouvrir une <A href="#" onClick="window.open('page-27.htm','popup',
    'toolbar=0,location=0,directories=0,status=0,scrollbars=0,resizable=0,menubar=0,
    width=300,height=210,top=150,left=250');return(false)">fenêtre popup</A></P>
</BODY>

Pour que votre fenêtre popup se ferme automatiquement après quelques secondes, il suffit de rajouter dans le tag <BODY> de la page page-27.htm, l'élément onLoad suivant :

<BODY onLoad="cmpt=setTimeout('self.close();',5000)">
<P align="center"><B>Fermeture automatique</B><BR>
<BR>
Laissez faire...</P>
</BODY>

Exemple : ouvrir la fenêtre popup portant le numéro 27.

Enfin, vous souhaitez peut-être que votre fenêtre popup se positionne automatiquement en plein centre de votre écran. Il suffit pour cela de créer un petit javascript dans votre page de départ :

<HEAD>
<SCRIPT type="text/javascript">
<!--
function popupcentree(page,nom,largeur,hauteur,options) {
  var top=(screen.height-hauteur)/2;
  var left=(screen.width-largeur)/2;
  window.open(page,nom,"top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}
-->
</SCRIPT>
</HEAD>
<BODY>
Ouvrir <A href="#" onClick="popupcentree('page-28.htm','popup',300,210,'toolbar=0,location=0,
  directories=0,status=0,scrollbars=0,resizable=0,menubar=0');return(false)">fenêtre centrée</A>
...
</BODY>

Exemple : ouvrir fenêtre centrée portant le numéro 28.