Vous êtes ici Tutoriel Les fenêtres popup

Lien utile

Tutoriel sur le JavaScript - Les fenêtres popup

Tous niveaux


Tutoriel écrit par LaurentG alias KOogar le 3 Mars 2009


Il y a de fortes chances si vous lisez cette page, que vous ayez déjà vu des centaines de fenêtres popup en JavaScript tout au long de votre surf sur la toile. Aujourd'hui les navigateurs proposent purement et simplement de désactiver les popup car trop d'abus!!

Cependant, certain sites web ont de bonnes raisons de se servir de popup, comme pour afficher des informations supplémentaires, ou pour ouvrir une nouvelle fenêtre qui n'est pas une balise ancre HTML (c'est-à-dire un lien hypertexte).

Sommaire :





Les fenêtres popup



La Fonction JavaScript window.open

La fonction window.open () crée une nouvelle fenêtre dans le navigateur, personnalisée en fonction de vos spécifications, sans l'emploi d'une balise ancre HTML. Dans cet exemple, nous allons créer une fonction qui utilise la fonction window.open ().

.01
.02
.03
.04
.05
.06
.07
.08
.09
.10
.11
.12
.13
.14
.15
.16
.17
  <head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLIQUE-MOI AUSSI!</p>
</body>
Ce script fonctionne avec quasiment n'importe quelle balise sur laquelle on peut cliquer. Veuillez s'il vous plaît continuer et expérimenter avec ce petit outil amusant. Ensuite, reprenez votre lecture pour en apprendre plus sur les différentes façons dont vous pouvez personnaliser la fenêtre JavaScript qui va s'ouvrir.


Les Arguments Window.Open de JavaScript

La fonction window.open admet trois arguments:
1. L’URL relative ou absolue de la page Web à ouvrir.
2. Le nom en format texte de la fenêtre.
3. Une longue chaîne qui contient toutes les propriétés de la fenêtre.

Nommer une fenêtre est très utile si vous souhaitez la manipuler plus tard avec JavaScript. Toutefois, cela sort du cadre de cette leçon, et nous nous concentrerons plutôt sur les différentes propriétés que vous pouvez configurer dans votre nouvelle fenêtre JavaScript.

Voici quelques-unes des plus importantes propriétés:
· dépendant - Les sous fenêtres se ferment si la fenêtre mère se ferme (la fenêtre qui les a ouvertes)
· plein écran - Affichage du navigateur en mode plein écran
· hauteur - La hauteur de la nouvelle fenêtre, en pixels
· largeur - La largeur de la nouvelle fenêtre, en pixels
· gauche - Pixel compensé par le côté gauche de l'écran
· haut de page - Pixel compensé par le haut de l'écran
· redimensionnable - Permet à l'utilisateur de redimensionner la fenêtre ou d’empêcher l'utilisateur de la redimensionner (à présent désactivé par Firefox).
· statut - Affiche ou non la barre d'état

Dépendant, plein écran, redimensionnable, et statut sont autant d'exemples de propriétés O / F. Vous pouvez soit les définir comme égales à zéro pour les fermer, ou les définir par un, pour les ouvrir. Il n'y a pas d’instruction à mi-chemin pour ce type de propriétés.


Une Fenêtre Flash améliorée!

Maintenant que nous avons les outils, nous allons faire une fenêtre Popup Javascript sophistiquée, dont nous pourrons être fiers!
.01
.02
.03
.04
.05
.06
.07
.08
.09
.10
.11
.12
.13
.14
.15
.16
.17
  <head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.fr/", "myWindow",
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLIQUE-MOI AUSSI!</p>
</body>

Ceci est un excellent exemple de fenêtre popup inutile! Lorsque vous ferez les vôtres, essayez de les rendre consistantes avec le contenu de votre site. Essayez de créer des petites fenêtres sans navigation donnant simplement la définition ou l’explication d'un mot, d’une phrase ou d’une image!