Créer son site Gratuitement : Service / Outils webmaster gratuit
Mon Site Gratuit
Contactez nous
Nos partenaires
Scripts
Tutoriaux
Nos services
Forums
Accueil
ForumsCréation d'un popup
      Imprimer le sujet FAQ  M'enregistrer 
  Le dynamisme rentre dans votre quotient avec le Javascript ! Des effets d'animations polyvalents pour les navigateurs. Un langage simple mais étonnant !

Création d'un popup

Messagede Vincento le 08 Nov 2008, 09:17

Voici un petit tuto qui permet de faire des popups qui ne se réactualiseront pas tant que le navigateur sera ouvert.
Pour cela, nous allons utiliser un cookie qui va étre créer au chargement de notre page et être détruit quand le navigateur sera fermé.
Ce code est à mettre sur la page à partir de laquelle le popup sera chargée.


Nous commençont par la création du cookie
Code: Tout sélectionner
function EcrireCookie(nom, valeur)
        {
                var argv=EcrireCookie.arguments;
                var argc=EcrireCookie.arguments.length;
                var expires=(argc > 2) ? argv[2] : null;
                var path=(argc > 3) ? argv[3] : null;
                var domain=(argc > 4) ? argv[4] : null;
                var secure=(argc > 5) ? argv[5] : false;
                document.cookie=nom+"="+escape(valeur)+
                    ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
                    ((path==null) ? "" : ("; path="+path))+
                    ((domain==null) ? "" : ("; domain="+domain))+
                    ((secure==true) ? "; secure" : "");
        } 



Code: Tout sélectionner
function getCookieVal(offset)
        {
               var endstr=document.cookie.indexOf (";", offset);
               if (endstr==-1) endstr=document.cookie.length;
               return unescape(document.cookie.substring(offset, endstr));
        }




Passons à la lecture du cookie
Code: Tout sélectionner
function LireCookie(nom)
        {
               var arg=nom+"=";
               var alen=arg.length;
               var clen=document.cookie.length;
               var i=0;
               while (i<clen)
               {
                    var j=i+alen;
                    if (document.cookie.substring(i, j)==arg) return getCookieVal(j);
                    i=document.cookie.indexOf(" ",i)+1;
                    if (i==0) break;
              }
                    return null;
        }   




Enfin, voici la fonction de traitement. C'est par elle que tout va se faire!
Code: Tout sélectionner
function traitement()
        {
                estCeOuvert=LireCookie("dejaOuvert");
                var confirm = "ok";
                if(estCeOuvert!=confirm){
                 window.open("lien_de_la_page","nom","height=450,width=550");
                      EcrireCookie("dejaOuvert","ok");
                }
        }


.:: Rock saves the Queen ::.
Avatar de l'utilisateur
Vincento
Nouveau Plug'zien
Nouveau Plug'zien
 
Messages: 13
Inscription: 22 Oct 2008, 16:18
Localisation: Blois
Points: 3


Re: Création d'un popup

Messagede Zeepix le 09 Nov 2008, 19:32

Cool ! Mais qui voudrai savoir fair une pop-up ???
Avatar de l'utilisateur
Zeepix
Plug'zien Star'z
Plug'zien Star'z
 
Messages: 649
Inscription: 29 Fév 2008, 20:30
Localisation: En france
Points: 3269


Re: Création d'un popup

Messagede Black le 09 Nov 2008, 21:02

Les Pop-up sont utiles pour afficher des petits messages, par exemple quand on reçoit un MP, ou alors pour mettre un avatar en taille réelle sans ouvrir un nouvel onglet... ect.
Black
Plug'zien Pro
Plug'zien Pro
 
Messages: 1233
Inscription: 08 Déc 2007, 21:34
Localisation: Cherbourg, France.
Points: 856


Re: Création d'un popup

Messagede Zeepix le 10 Nov 2008, 18:33

Ah... Moi je pensais que c'étais pour de la pub et des truc du genre.... :hs:
Avatar de l'utilisateur
Zeepix
Plug'zien Star'z
Plug'zien Star'z
 
Messages: 649
Inscription: 29 Fév 2008, 20:30
Localisation: En france
Points: 3269


Re: Création d'un popup

Messagede jeromecold le 10 Nov 2008, 18:41

loulou-du-57 a écrit:Ah... Moi je pensais que c'étais pour de la pub et des truc du genre.... :hs:

Un pop-up c'est avant tout une page Internet en html dans laquelle tu mets ce que tu veux!

Mais y'a bien des pop-up publicitaires et ceux-ci s'ouvrent souvent sans prévenir!
Arobase plus
Avatar de l'utilisateur
jeromecold
Plug'zien Pro
Plug'zien Pro
 
Messages: 3156
Inscription: 05 Sep 2007, 13:18
Points: 2915


Re: Création d'un popup

Messagede Melo98 le 10 Nov 2008, 19:19

Vous auriez un exemple ,
car pour moi c'était aussi de la pub. :-D
Avatar de l'utilisateur
Melo98
Funny Plug'z
Funny Plug'z
 
Messages: 159
Inscription: 04 Sep 2008, 13:30
Points: 83


Re: Création d'un popup

Messagede Black le 10 Nov 2008, 20:40

Sur JV.com par exemple : ici clique sur Image et un pop-up va s'ouvrir ;-)
Black
Plug'zien Pro
Plug'zien Pro
 
Messages: 1233
Inscription: 08 Déc 2007, 21:34
Localisation: Cherbourg, France.
Points: 856


Re: Création d'un popup

Messagede Melo98 le 10 Nov 2008, 22:12

Ah okay, merci mais,
peut-on s'en servir pour avoir une image plus grande, d'une petite photo,
sans avoir a charger sur une nouvelle page ?
Une sorte de zoom car c'est que je recherche,
petite photo sur le site avec un agrandissement quand on clique.
Avatar de l'utilisateur
Melo98
Funny Plug'z
Funny Plug'z
 
Messages: 159
Inscription: 04 Sep 2008, 13:30
Points: 83


Re: Création d'un popup

Messagede jeromecold le 11 Nov 2008, 09:19

Melo98 a écrit:Ah okay, merci mais,
peut-on s'en servir pour avoir une image plus grande, d'une petite photo,
sans avoir a charger sur une nouvelle page ?
Une sorte de zoom car c'est que je recherche,
petite photo sur le site avec un agrandissement quand on clique.

Bein au lieu de faire pointer la pop-up vers une page en html, tu la pointe directement sur ton image (.jpg, .gif, .png ...)!
En téorie sa suffit (sinon un petit bout de script php simple générera une page).
Arobase plus
Avatar de l'utilisateur
jeromecold
Plug'zien Pro
Plug'zien Pro
 
Messages: 3156
Inscription: 05 Sep 2007, 13:18
Points: 2915


Re: Création d'un popup

Messagede elition le 11 Nov 2008, 11:22

moi aussi j'aimerai bien ce genre de script a inseré.

Car je vais reprendre la création de mon site, qui est un site sur des film amateur.

Et j'aimerais avoir un script qui permette lors du passage de la souri, de mettre l'image plus grande.

Exemple ici : http://www.dinocenter.fr/index.php?page=races

(c'est un site d'aide pour un jeu)

Une foie la page chargé, cliquez sur l'onglet en savoir plus, cela va agrandir le tableau et 4 images vont apparaitre. Ensuite si vous passez le curseur dessus alors les images grossisse, J'aimerais avoir ce script pour mon site car cela me serait utile pour les galerie photo
mon dernier tutoriel :

- ici

Image
Avatar de l'utilisateur
elition
Funny Plug'z
Funny Plug'z
 
Messages: 143
Inscription: 28 Mai 2008, 18:19
Points: 60


Re: Création d'un popup

Messagede Vincento le 13 Nov 2008, 07:54

A l'origine, ce script ma servi pour intéhré une playlist de deezer sur un forum xooit pour une alliance d'Ogame.
Cela permettait de gardait la playlist allumé sans redemarrage de celle-ci dès que la page du forum est changé.
.:: Rock saves the Queen ::.
Avatar de l'utilisateur
Vincento
Nouveau Plug'zien
Nouveau Plug'zien
 
Messages: 13
Inscription: 22 Oct 2008, 16:18
Localisation: Blois
Points: 3


Re: Création d'un popup

Messagede axoul le 22 Juil 2009, 13:13

Bonjour,
j'aimerai faire un script: quand on clique sur l'images un petite fenêtre s'ouvre avec l'images plus grande et un bouton "Fermer" en haut à droite.
SVP
Axoul
Avatar de l'utilisateur
axoul
Nouveau Plug'zien
Nouveau Plug'zien
 
Messages: 10
Inscription: 23 Jan 2009, 17:10
Localisation: à chatillon-en-michaille sur mon ordi.
Points: 31


Re: Création d'un popup

Messagede zardoz le 22 Juil 2009, 16:04

Salut axoul

Considère ici que tous les scripts de démonstration sont basique. Simple.
Tous ces codes peuvent être pousser davantage. C'est juste un point de départ.

C'est dans la balise <img /> que tu placera l'appelle de la fonction javaScript.

popUp_01.html

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popUp 01</title>
<script type="text/javascript">
  function ouvrirPopUp()
  {
     window.open("maPopUp.html", "maPopUp", "width=800; height=200;");
  }
</script>
</head>

<body>
<img src="images/scripteurFlash.png" alt="" onclick="javascript:ouvrirPopUp();" />
</body>
</html>


Tu peut le faire ainsi » ta fonction ouvrirPopUp ( $url ) ;
La fonction possède un paramètre : $url.

popUp_01.html

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popUp 01</title>
<script type="text/javascript">
  var url = '';
  function ouvrirPopUp($url)
  {
     this.url = $url;
     window.open(url, "maPopUp", "width=800; height=200;");
  }
</script>
</head>

<body>
<img src="images/scripteurFlash.png" alt="" onclick="ouvrirPopUp('maPopUp.html');" />
</body>
</html>


Pour fermer la fenêtre » maPopUp.html » Attention ici il s'agit du popUp nommé : maPopUp.html.

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>maPopUp 01</title>
</head>

<body>
<img src="images/scripteurFlash.png" alt="" />
<form action="">
<input type="button" name="maPopUp" value="Fermer" onclick="window.close();"/>
</form>
</body>
</html>


Si tu le place dans un <div> avec style CSS pour le curseur

Code: Tout sélectionner
<div style="cursor:hand;">
<img src="url_image" width="x" height="x" onclick="javascript:ouvrirPopUp ( ) ;" />
</div>


Tu peut écrire onclick de cette façon : onclick="ouvrirPopUp ( ) ;"
le protocole javascript: » n'est pas obligatoire.

Tu peut aussi utiliser la balise <a href="ta fonction javascript();">

Code: Tout sélectionner
<a href="javascript:ouvrirPopUp ( ) ;">
<img src="url_image" width="x" height="x" alt="" />
</a>


Ta fonction comporte l'objet « window.open(avec ses paramètres);

Code: Tout sélectionner
function ouvrirPopUp()
{
   window.open ( "maPopUp.html", "maPopUp", "Largeur hauteur scrollbar='no/yes' statusbar='no/yes', ect...") ;
}


Évidemment tu peut poussé davantage avec un array donc un seul popUp, toujours le même,
mais avec différentes images sur appelles onclick..

Le deuxième paramètre sert au développement plus poussé en javascript du genre formulaire par exemple.

javascript avec deux points est vraiment un protocole » javascript:
vous pouvez donc écrire dans la barre d'adresse du navigateur ceci »
javascript:document.write('ton nom'); et faire ok ou enter.

Je te suggère ceci : http://www.monsitegratuit.com/forum/javascript-bible-4th-edition-pdf-t2677.html

Bref tu peut tout controler avec le 3ième params : hauteur, largeur, scrollbar, statusbar, position x/y ect . . .

» http://www.commentcamarche.net/contents/javascript/jswindow.php3
» ici on explique assez bien l'objet window.open ( ) ;

++
zardoz
Plug'zien Star'z
Plug'zien Star'z
 
Messages: 888
Inscription: 16 Fév 2008, 04:05
Points: 582



Retourner vers Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités