Accueil » Dossiers » Language Web » Autres languages » Fenêtre popup en javascript

Fenêtre popup en javascript

Voici un exemple simple pour ouvrir une fenêtre popup en javascript.
Elles sont souvent utilisées pour afficher un message court, ou de la publicité.


Les internautes n’aiment pas trop voir s’afficher une fenêtre popup, il vaut donc mieux limiter leur utilisation.

Pour créer une popup, on utilise la méthode open() associé à l’objet window.
La méthode open accepte 3 paramètres sous forme de chaînes de caractères.

1. L’adresse URL de la page que l’on veut ouvrir dans cette fenêtre.
2. Le nom (interne) que l’on veut associer à cette fenêtre et qui pourra être utilisé comme TARGET pour des liens hypertextes ou des soumissions de formulaires par exemples.
3. Une chaîne de caractères définissant les caractéristiques d’affichage de cette fenêtre.

Cette chaîne de caractères accepte les éléments suivants (séparés par des virgules) :


toolbar = yes | no
cet élément affichera la barre d’outils s’il est placé à la valeur yes ,
location = yes | no
affichera la barre d’adresse s’il est placé à la valeur yes,
directories = yes | no
affichera la barre d’outils personnels ou la barre de liens s’il est placé à la valeur yes,
status = yes | no
affichera la barre de statut s’il est placé à la valeur yes,
menubar = yes | no
affichera la barre de menus s’il est placé à la valeur yes,
scrollbars = yes | no
affichera les barres de défilement s’il est placé à la valeur yes ;
resizable = yes | no
interdit de redimensionner la fenêtre s’il est placé à no,
width
indique la largeur de la fenêtre en pixels,
height
indique la hauteur de la fenêtre en pixels,
top
indique le positionnement vertical de la fenêtre en pixels,
left
indique le positionnement horizontal de la fenêtre en pixels,


Voici la partie le script qui ouvre une fenêtre popup :

 
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    window.open ('fenetre_popup.html')
    -->
    </SCRIPT>

Voici un script plus élaboré qui permet de choisir les paramètres d’affichage de la fenêtre popup.

 
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    window.open ('fenetre_popup.html', 'nom_interne_de_la_fenetre', config='height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')
    -->
    </SCRIPT>

Voici le même script transformé en fonction avec comme paramètres le nom de la fenêtre popup et son nom interne.

Voici la partie à mettre entre les balises <head> </head>

 
    <SCRIPT LANGUAGE="JavaScript">
    <--
    function affichage_popup(nom_de_la_page, nom_interne_de_la_fenetre)
    {
    window.open (nom_de_la_page, nom_interne_de_la_fenetre, config='height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')
    }
    -->
    </SCRIPT>

Et le code pour demander l’affichage, à mettre dans entre les balises <body> </body>.

On veut ouvrir la fenêtre "fenetre_popup.html" et lui donner comme nom interne « popup_1 ».

 
    <A HREF="javascript:affichage_popup('fenetre_popup.html','popup_1');">Ouvrir une fenêtre popup</A>

Voir l'exemple : Ouvrir une fenêtre popup

Petit plus : Pour créer un bouton pour fermer la fenêtre popup (ou tout autre fenêtre), placez le code suivant dans le source de la fenêtre (ici fenetre_popup.htm) :

 
    <FORM>
    <INPUT TYPE="BUTTON" VALUE="Fermer la fenêtre" ONCLICK="window.close()">
    </FORM>