Cet article vous décrit comment créer et manipuler une fenêtre pop-up en javascript. Script compatible IE (version 4 et +) et Netscape (version 4.X et 6).
Programmation > JavaScript
Recherche :   
Actualité Système Salon Concours Outils Programmation Devparadise Programmation HTML .Net JavaScript VBScript ASP PHP Visual Basic Perl Java Active X SQL XML WAP Delphi Graphisme Flash Web Design Promotion Référencement Publicité Valeur de votre site Outils Systèmes Windows Unix Linux Benchmark Hardware Réseaux locaux Droit Sécurité
Fenêtre pop-up en javascript.
  Auteur : Yvan VANWYNSBERGHE

Cet article vous décrit comment créer et manipuler une fenêtre pop-up en javascript. Script compatible IE (version 4 et +) et Netscape (version 4.X et 6).

Publicité 
Vous pouvez directement télécharger le code correspondant à cet article en cliquant ici .

Voici une fonction permettant d'ouvrir une fenêtre pop-up centrée sur votre écran :

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function OpenPopUp(MyFile,MyWindow,MyWidth,MyHeight)
//MyFile :  nom du fichier contenant le code HTML du pop-up
//MyWindow :  nom de la fenêtre (ne pas mettre d'espace)
//MyWidth :  entier indiquant la largeur de la fenêtre en pixels
//MyHeight :  entier indiquant la hauteur de la fenêtre en pixels

{  
var ns4 = (document.layers)? true:false;   //NS 4
var ie4 = (document.all)? true:false;  //IE 4
var dom = (document.getElementById)? true:false;  //DOM
var xMax, yMax, xOffset, yOffset;;  

    if (ie4 || dom)
        {
        xMax = screen.width;
        yMax = screen.height;
        }
    else if (ns4)
        {
        xMax = window.outerWidth;
        yMax = window.outerHeight;
        }
    else
        {
        xMax = 800;
        yMax = 600;
        }
    xOffset = (xMax - MyWidth)/2;
    yOffset = (yMax - MyHeight)/2;
    window.open(MyFile,MyWindow,'width='+MyWidth
+',height='+MyHeight
+',screenX='+xOffset
+',screenY='+yOffset
+',top='+yOffset
+',left='+xOffset
+',scrollbars=yes,resizable=yes');
    }
//-->
</SCRIPT>

Pour ouvrir un pop-up centré sur votre écran, il suffit d'appeler cette fonction avec les paramètres suivants :

- MyFile = nom du fichier contenant le contenu du pop-up (exemple : mapage.htm).
- MyWindow = nom de la fenêtre (exemple : mapage). Il ne faut pas d'espace dans le nom de la fenêtre.
- MyWidth = largeur de la fenêtre
- MyHeight = hauteur de la fenêtre

Voici un exemple d'appel de cette fonction qui permet d'ouvrir un pop-up sur le clic d'un bouton :

<INPUT TYPE="BUTTON" VALUE="Pop-up"
onclick="OpenPopUp('mapage.htm','mapage',200,300)">

Quand le pop-up est déjà ouvert et qu'il est caché par la fenêtre de navigation. Si on veut ouvrir à nouveau cette fenêtre pop-up à partir de la fenêtre de navigation, elle reste cachée par la fenêtre de navigation et on a l'impression que cela ne marche pas. Pour éviter ce problème et ainsi faire en sorte que ce pop-up repasse visible au premier plan sur votre écran à chaque demande d'ouverture même s'il est déjà ouvert, il suffit d'ajouter le code suivant dans la balise <BODY> du code HTML de la fenêtre pop-up :

<BODY onload= "window.focus()">

Il peut arriver que vous souhaitez que l'internaute ne puisse pas aller sur une autre fenêtre tant qu'il n'a pas fermé la fenêtre pop-up (en cliquant sur un bouton d'acceptation par exemple). Pour cela, il suffit de déclarer dans la balise <BODY> du contenu du pop-up le code suivant :

<BODY onblur= "window.focus()">

Enfin, La déclaration d'un lien ou d'un bouton servant à fermer le pop-up est la suivante :

un lien
<A href= "javascript :window.close">Fermer</A>

un bouton
<INPUT Type="Button" Value="Fermer" onclick="javascript :window.close">

A lire aussi sur Devparadise.com :
  • Personnalisation de windows XP
  • Httrack (3.40) Un aspirateur OpenSource
  • Boîtes de contenu flottantes
  • Stratégie de sécurisation d'un réseau d'entreprise
  • Ajuster dynamiquement la taille d'une fenêtre
  • A télécharger aussi sur Devparadise.com :
  • MADOTATE 3D
  • FCKeditor 2.4.3
  • WinExposé
  • XAMPP 1.5.1 pour windows
  • Framakey 1.0.5 RC1

  • © 1997-2005 tous droits réservés Devparadise.com
    Les logos, et marques déposées sont la propriété de leurs détenteurs respectifs.
    Devparadise.com s'est engagé à respecter la confidentialité des données personnelles régies par la loi 78-17 du 6 janvier 1978.
    Déclaration C.N.I.L. n° 621623
    Javascript,fenêtre,popup,window,open,focus,onload,onblur