Faire une pop-up en JavaScript

De Wiki PC, Wiki Informatique.

Sommaire

Description du problème :

Je construis une page HTMl et je souhaiterai faire une (ou plusieurs) pup-up en JavaScript.


Solution(s) proposée(s) :

Pour faire une seule pop-up

Pour faire une pop-up en JavaScript, c'est très simple, il suffit d'utiliser la méthode "open()" de l'objet window :

window.open("http://urldelapageacharger.htm", "nomdelafenetrepopup", "height=XXX, width=XXX, menubar='yes|no', toolbar='yes|no', location='yes|no', status='yes|no', scrollbars='yes|no'");

Mettez cette ligne autant de fois que vous souhaitez voir apparaître des pop-ups, en mettant les bonnes valeurs aux champs.

Bien évidemment, il faut remplacer :

  • http://urldelapageacharger.htm par l'url de la page à charger.
  • nomdelapfenetrepopup par le nom de la future fenêtre qui sera ouverte (ce nom sert aux accès scripts, notamment JavaScript).
  • Les XXX' de height et width par respectivement la hauteur et la largeur de la futur pop-up.
  • Il faut choisir soit "yes" soit "no" pour toutes les options ='yes|no'.


Ensuite il ne vous reste plus qu'à intégrer le script dans votre page :

<script type="text/javascript" >
<!--
window.open("http://urldelapageacharger.htm", "nomdelafenetrepopup", "height=XXX, width=XXX, menubar='yes|no', toolbar='yes|no', location='yes|no', status='yes|no', scrollbars='yes|no'");

//-->
</script>


Ouvrir une ou plusieurs pop-up avec une fonction

Le JavaScript est souvent utilisé sous forme de fonction, en effet celles-ci sont très pratique puisqu'elle peuvent être intégrée dans le HTML grâce au gestionnaire d'évènement, exemple :

<body onload="showpopup();" >

Si showpopup() est bien la fonction affichant les pup-ups, alors dans cet exemple, les pop-ups sont ouvertes au chargement du document HTML (une fois celui-ci chargé en entier).


Voici comment mettre le code sous forme de fonction :

<script type="text/javascript" >
<!--
function showpopup() {
 window.open("http://urldelapageacharger.htm", "nomdelafenetrepopup", "height=XXX, width=XXX, menubar='yes|no', toolbar='yes|no', location='yes|no', status='yes|no', scrollbars='yes|no'");
}
//-->
</script>



Solution(s) retenue(s) :

Utiliser le code fourni ci-dessus, soit en insérant directement le code exécuté (qui sera éxécuté à son chargement), soit en créant une fonction est en utilisant onclick="", onload="", onmouseover="", onmouseout="", etc... (le gestionnaire d'évènement JavaScript/HTML).


Informations annexes :

Pour ouvrir une pop-up sans JavaScript, se référer à l'article Ouvrir une pop up sans JavaScript.

Outils personnels