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 :
Ici vous pouvez placer n'importe quelles autres informations complémentaires autour de ce problème / sujet.
