Annonce ToutSurTout

Bienvenue sur toutsurtout.biz

Déjà 15 ans !

Radio TST

Si vous souhaitez participer vous aussi aux discussions sur le forum, il faut vous inscrire ou vous identifier.

Le Thème TST Automne est maintenant en place.

Les inscriptions sont actuellement OUVERTES.

Message 1 Discussion postée le 07-11-2009 à 05:27:06

Solenne
Avatar de Solenne


Titre: Modératrice insomniaque
Avancement: Niveau 4
Lieu: Avec Loic
Date d'inscription: 26-09-2009
Messages: 6 834

Les popups, le guide définitif

Les popups, le guide définitif

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>


https://www.world-lolo.com/images/uploads/image.num1351106986.of.world-lolo.com.gif
 

Message 2 Réponse postée le 13-11-2009 à 16:08:02

Caroline
Avatar de Caroline


Titre: Modératrice de choc
Avancement: Niveau 3
Lieu: Marne
Date d'inscription: 27-09-2009
Messages: 5 352

Re: Les popups, le guide définitif

+1


http://www.toutsurtout.biz/img/UserBarTST.gif
https://www.world-lolo.com/images/uploads/image.num1258671799.of.world-lolo.com.jpeg