Tout JavaScript.com - Scripts, Tutoriaux, Forums pour webmasters et développeurs
Retour à l'accueil
Rechercher :    

Les indispensables
Magic Menu
Les meilleurs scripts
Les forums
Les tutoriaux
La référence JavaScript
Les actus du net
Les petites annonces

Shopping
Le guide complet
Hébergement web

Les javascripts
Les plus vus
Les mieux notés
La boutique

Les tutoriaux
Introduction javascript
La structure javascript
Les limites de javascript
Les popups
Les formulaires
Le DHTML
Les cookies
Les frames
Les maths
Les chaînes de caractères
Les expressions régulières
Débugger un script
AJAX / XMLHTTPRequest
Introduction au PHP
Javascript et PHP
Traiter les données PHP
Intro base de données
Optimiser ses développements
Tous les tutoriaux

Les services
Les questions fréquentes
Les forums | Le chat
L'annuaire de sites
Le livre d'or
Contacts
A propos du site
La newsletter
 Inscription à la newsletter
HTML - Texte

Les partenaires
Beauté-test
Révélateur.com
jquery













Devant le nombre de questions concernant les popups, devant la richesse des options et des possibilités, je crois que ce tutorial est indispensable. Il est découpé en 2 pages :
1 - Les bases des popups
2 - Aller plus loin


C'est quoi un popup ?
Le mot popup peut être traduit par fenêtre surgissante. L'ouverture de cette fenêtre est déclenchée par un événement utilisateur (clic, ouverture de site, minuterie, ...) via une seule ligne de code javascript. Un popup est ouvert grâce à la méthode (ou fonction) appelée sur l'objet window. Cette fonction attend 3 paramètres :
  window.open( page [,nom] [,options] )

Les trois paramètres sont des chaînes de caractères.
- page contient l'adresse de la page à afficher.
- nom contient le nom du popup qui va être ouvert. Non obligatoire.
- options est une chaîne de caractères contenant les options de paramétrage du popup. Non obligatoire.
Les 2 derniers paramètres ne sont pas indispensables.

Pour ouvrir un popup sur un lien, voici la syntaxe HTML :
   <A href="javascript:popup('popup.html')">Ouverture popup basique</A>
avec comme déclaration la fonction popup() :
  <SCRIPT language="javascript">
    function popup(page) {
      window.open(page);
    }
  </SCRIPT>
Voici le résultat de ce lien:
Ouverture popup basique


Les options d'affichage
Il est possible grâce au second paramètre d'affecter un nom au popup ouvert. Ainsi les autres popups seront ouverts dans le même popup. Cela évite d'envahir l'écran du visiteur avec de multiples fenêtres. Pour remettre le popup en premier plan, voir la page "Aller plus loin".
Sans le paramètre nom, un nouveau popup est ouvert à chaque fois.

Le dernier paramètre contient une chaîne d'options d'affichage. Chaque option est séparée par une virgule (à ne pas confondre avec la syntaxe des feuilles de style qui demande un point-virgule). Voici la liste des options :
Propriétés Effets Valeurs possibles
directories Affichage de la barre de liens yes | no
menubar Affichage de la barre de menu yes | no
status Affichage de la barre de statut yes | no
location Affichage de la zone d'adresse yes | no
scrollbars Affichage des barres de scrolling yes | no | auto
resizable Autorise le redimensionnement du popup yes | no
height Hauteur en pixels nombre entier
width Largeur en pixels nombre entier
left Position horizontale en pixels sur l'écran nombre entier
top Position verticale en pixels sur l'écran nombre entier
fullscreen Popup en plein écran (version 5 et +) yes | no

Quelques exemples de combinaisons d'options :

Popup positionné
Position fixe en haut à gauche
OuvrirPopup('popup.html','','top=10,left=10')

Popup minimaliste
Aucune barre de menu, non redimensionnable, taille fixe
OuvrirPopup('popup.html', '', 'resizable=no, location=no, width=200, height=100, menubar=no, status=no, scrollbars=no, menubar=no')

Popup fullscreen
Page en plein écran (version 5 et +). Faire un ALT [F4] pour fermer la fenêtre
OuvrirPopup('popup.html','','fullscreen=yes')



Voici la fonction javascript qui ouvre un popup pour tous ces exemples :
  <SCRIPT language=javascript>
    function OuvrirPopup(page,nom,option) {
       window.open(page,nom,option);
    }
  </SCRIPT>


A vous de tester :
Placez les options dans la zone de texte et ouvrez le popup associé
Nous avons vu comment créer un popup de base. La page suivante montre comment aller plus loin.

PAGE SUIVANTE : Aller plus loin >>


| © Tout JavaScript.com 1999-2005 | Scripts | Tutoriaux | Forums | Référence | Magic Menu V2 | Mailociraptor | Petites annonces informatiques |


Edité par DevTribu sarl  Google
Serveur dédié vps : Page générée en 3 msec
25/08/2016 01:22:12 - OB = off