Discussion :

[°°° Zen-Spirit °°°]

Bonjour à tous !
Je reviens vers pour un petit problème que je rencontre.
Voilà, je veux créer l'ouverture d'une boite de popup lorsque je clic su un lien.
J'ai téléchargé une source qui montre comment faire çà
Dans cette source il y a 5 fichiers
- Index htm
- popup.htm
- popup.js
- serial-popup-killer.js
- serial-popup-killer.css

Alors moi dans ma page index à moi, j'ai mis 2 liens pour faire un test ( dans Fil Info de mon site : ICI MON SITE)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<li><a href="pop_up/popup-accessible/popup.htm" class="popup"><span>18h50</span> <strong>Pays-Bas  </strong> -  Huntelaar touch&eacute;</a></li> </li>
<li><a href="pop_up/popup-accessible/popup.htm" class="popup"><span>18h45</span> <strong>blabla</strong> -  Essai Popup 2</a></li> </li>

Le chemin pour aller vers les 4 autres fichiers sont : "pop_up/popup-accessible/popup.htm"
"pop_up/popup-accessible/popup.js"
"pop_up/popup-accessible/serial-popup-killer.js"
"pop_up/popup-accessible/serial-popup-killer.css"

1/ Mais voilà, lorsque je clique sur les deux liens de test que j'ai mis sur mon site, il affiche une page html normale et non dans dans une popup.
2/ Autre soucis que je viens tout juste de voir, c'est que tout en bas de ma page, en descendant au maximum, il me met directement un lien de fermeture de popup, hors ma page index n'est pas une popup, d'ailleurs ce n'est pas ce que je souhaite.

Je ne vois pas où est l'erreur alors que si je fais un test avec la page index d'origine de la source, çà marche et çà ouvre bien dans une popup.
Pouvez vous m'aider à comprendre l'erreur ici ?
Merci.

Pour info : Voici le fichier serial-popup-killer.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*****************************************/
/*                                       */
/*  Bouton de fermeture pour popup       */
/*  Script DOM popup.js                  */
/*  Auteur: koala64                      */
/*  Contact: contact_koala64@yahoo.fr    */
/*                                       */
/*****************************************/
 
// Création d'un objet
var o = {};
 
// Propriétés Popup de l'objet
o.Popup =
{
 
	// Initialisation de l'objet
	__Init__: function()
	{
		if( !document.getElementsByTagName ||
			!document.createElement ||
			!document.createTextNode ) return false;
		return o.Popup.__Handle__();
	},
 
	// Création et insertion du bouton de fermeture
	__Handle__: function()
	{
		var oBody = document.getElementsByTagName('body')[0],
			oA = document.createElement('a'),
			oTextA = document.createTextNode('Fermer la popup');
		oA.setAttribute('href','#');
		oA.setAttribute('id','kill');
		oA.appendChild(oTextA);
		oBody.appendChild(oA);
		oA.onclick = o.Popup.__Kill__;
	},
 
	// Méthode de fermeture de la popup
	__Kill__: function()
	{
		self.close();
	}
 
};
 
// Chargement de l'objet au lancement de la page.
window.onload = o.Popup.__Init__;

Et Voici l'autre fichier : popup.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*****************************************/
/*                                       */
/*  Popup accessible (DOM)               */
/*  Script DOM popup.js                  */
/*  Auteur: koala64                      */
/*  Contact: contact_koala64@yahoo.fr    */
/*                                       */
/*****************************************/
 
// Création d'un objet
var o = {};
 
// Propriétés Popup de l'objet
o.Popup =
{
 
	// Initialisation de l'objet
	__Init__: function()
	{
		if( !document.getElementsByTagName ) return false;
		return o.Popup.__Manager__();
	},
 
	// Gestionnaire de l'évènement onclick sur les liens possédant la classe 'popup'.
	__Manager__: function()
	{
		var oLink = document.getElementsByTagName( 'a' ),
			a = oLink.length - 1;
		for( a ; a >= 0 ; a-- )
		{
			if( oLink[a].className == 'popup' )
			{
				oLink[a].onclick = o.Popup.__Open__;
			}
		}
	},
 
	// Méthode d'ouverture de la popup
	__Open__: function()
	{
		window.open( this.href , '' , 'top=200 , left=200 , width=200 , height=100 , scrollbars=yes' );
		return false;
	}
 
};
 
// Chargement de l'objet au lancement de la page.
window.onload = o.Popup.__Init__;

Merci

[Bovino]

Le href définit l'ancre vers laquelle se diriger lorsqu'on clique.
Cette ancre peut être dans la page (href="#cette_ancre") ou sur une autre page (href="page.html"), c'est le principe même du h de html, les liens hypertextes. Dans ton cas, tu n'ouvres pas de popup mais tu envoies le navigateur sur une autre page.

Pour ouvrir une popup sur un lien a (=anchor=ancre), il faut court-circuiter la référence à cette ancre en javascript.

Deux méthodes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript: ouvrirPopUp('page.html')">

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="ouvrirPopUp('page.html')">

Quant à l'ouverture de la popup, il te suffit de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function(ouvrirPopUp(pageDestination){
   window.open(pageDestination, options)
}

Pour les options, voir ici, en anglais désolé

[°°° Zen-Spirit °°°]

Le href définit l'ancre vers laquelle se diriger lorsqu'on clique.
Cette ancre peut être dans la page (href="#cette_ancre") ou sur une autre page (href="page.html"), c'est le principe même du h de html, les liens hypertextes. Dans ton cas, tu n'ouvres pas de popup mais tu envoies le navigateur sur une autre page.

Pour ouvrir une popup sur un lien a (=anchor=ancre), il faut court-circuiter la référence à cette ancre en javascript.

Deux méthodes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript: ouvrirPopUp('page.html')">

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="ouvrirPopUp('page.html')">

Quant à l'ouverture de la popup, il te suffit de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function(ouvrirPopUp(pageDestination){
   window.open(pageDestination, options)
}

Pour les options, voir ici, en anglais désolé

Salut Bovino et merci d'avoir répondu et de me proposer une solution.
Cependant, je ne comprends pas pourquoi sans passer par ce que tu dis çà fonctionne.
Ce que je veux dire c'est que dans le fichier source sur le site où j'ai récupérer les codes et fichiers JS, çà fonctionne très bien avec leur pasge HTML.
Mais là popup ne fonctionne pas avec ma page index à moi.
Rien que pour voir ce au'il y a dans la page index de leur fichier source, il y a ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Popup accessible avec bouton de fermeture (DOM)</title>
		<script src="popup.js" type="text/javascript"></script>
	</head>
	<body>
		<p><a href="popup.htm" class="popup">Ce lien</a> </p>
	</body>

Et c'est tout.
Sinon, je ne saisi pas très bien ce que tu veux me dire.
Donc pour toi, çà devrai marcher avec ton code, même sans fichier .JS !!!!

[°°° Zen-Spirit °°°]

Je viens de modifier mon code et j'ai mis sur ton exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

   <li><a href="popup.htm" class="popup" onclick="ouvrirPopUp('popup.html')"><span>18h50</span> <strong>Pays-Bas  </strong> -  Huntelaar touch&eacute;</a></li>

Mais çà ne change rien, il ouvre toujours une page HTML, et non une popup.

[Bovino]

Pour que ça marche, il faut insérer la fonction ouvrirPopUp soit dans un fichier js, soit dans le head de ta page entre les balises <script type="text/javascript"> et </script> en mettant à jour les options de window.open() (taille de la popup, faut-il la barre de navigation, les ascenseurs, la barre de titre... tout ça est paramétrable) et mettre un lien <a href ="#" onclick="ouvrirPopUp('popup.html')">

[°°° Zen-Spirit °°°]

Ben c'est ce qu'il y a dans le fichier "popup.js" regarde c'est dans le code que j'ai mis au tout début.
C'est un code qui se trouve déjà dans leur fichier .js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
window.open( this.href , '' , 'top=200 , left=200 , width=200 , height=100 , scrollbars=yes' );
		return false;
	}

je t'avoue que j'ai un peu de mal là.

[°°° Zen-Spirit °°°]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function(ouvrirPopUp(pageDestination){
   window.open(pageDestination, options)
}

Ce code là, je le mets où ?
D'ailleurs dans page de destination, je mets une adresse de destination mais quand il y a plusieurs adresses, c'est à à dire, que si j'ai 3 liens qui ouvre 3 popup et si je défini une page , ben pour les deux autres , je vois pas trop comment les déterminer.

[Bovino]

Oui, j'ai bien vu et c'est tant mieux car à ma connaissance, c'est le seul moyen d'ouvrir une popup.
Le code que tu proposes permet d'ouvrir soit une popup soit une page si ton navigateur n'accepte pas javascript. (C'est peut-être ton cas ???)
Si tu veux tout simplement ouvrir une popup, tu n'as pas besoin de ça et la solution est simple.
Si tu veux absolument utiliser le code que tu as trouvé, je pense après avoir un peu regardé les différents éléments que ton problème doit venir des répertoires de tes fichiers :

Le javascript essaye d'ouvrir le fichier en référence depuis son répertoire (pop_up/popup-accessible/), comme il ne le trouve pas, c'est le href du code html qui prend la main et ouvre le lien de référence depuis son répertoire... (qu'il trouve)

[°°° Zen-Spirit °°°]

Re-Salut Bovino.
Alors je viens de faire des petites modifs, et tu as raison !
en fait le code source que j'ai pris sur leur site fonctionne très bien !
Mais uniquement sous INTERNET EXPLORER et pas sous FIREFOX qui est mon navigateur par défaut.
Haïe haïe haïe !!!
Y a il un moyen d'y remédier ou de forcer tout çà selon toi, pour que çà passe sous FIREFOX MOZILLA ?

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Popup accessible avec bouton de fermeture (DOM)</title>
	<script type="text/javascript">
	function ouvrirPopUp(pageDestination){
	   window.open(pageDestination, '' , 'top=200 , left=200 , width=200 , height=100 , scrollbars=yes' );
	}
	</script>
</head>
<body>
	<p><a href="javascript: ouvrirPopUp('popup.html')" class="popup">Ce lien</a></p>
</body>

Essaye comme ça

[°°° Zen-Spirit °°°]

Salut Bovino !
Super !
çà marche nickel !
Cependant, une dernière question : Dois je supprimer les fichiers popup.js et serial-popup-killer.js ?
Il me semble que non, puisque sinon, le bouton "fermer popup" ne fonctionnera plus.
Mais je n'en suis pas sûr.
En tout cas, un grand merci à toi !

[Bovino]

A priori tu peux supprimer ces fichiers avec mon code, il faudra cependant ajouter dans ta popup un élément de fermeture (bouton, div...) avec un attribut onclick :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div onclick="this.close()">Fermer la fenêtre</div>

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="Fermer" onclick="this.close()" />

[°°° Zen-Spirit °°°]

Merci encore Bovino !
En fait j'ai gardé les fichiers JS, car il y a le bouton "fermer la fenêtre" et dans ces fichiers il envoie au CSS pour le style du bouton.
Bref ! Ce n'est qu'un détail à mon sens.
Sinon, j'ai un soucis, lorsque la fenêtre de la popup s'ouvre, il y a la barre de défilement horizontale qui apparait hors j'ai le cadre rouge fait 700 px en width et je l'ai bien défini dans mon CSS tout comme le body.
Je vous laisse le lien de mon site pour voir ce que çà donne : Clic sur le 1er lien dans Fil Info
Pour le body de la popup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*
{
	padding: 0;
	border: 0;
	margin: 0;
}
body
{
	font: 100% "Times New Roman", serif;
	background-color: #000000;
	color: #FFFFFF;
	margin-bottom: 10px;
	width: 700px;
	}
p
{
	margin: 1em auto;
	text-align: left;
}

Pour la cadre rouge qui est composé de 3 parties :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 #corps_popup
{
   float: left;
}
.cadre_popup_haut
{
 
   height: 31px;
   margin-left: 0px; 
   margin-top: 0px;
   background-image: url("images_popup/bordure_haute1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }  
 
.cadre_popup_centre
{
   overflow: auto;
   width: 700px;
   margin-left: 0px; 
   padding-left: 35px;
   padding-right: 35px;
   margin-top:0px;
   background-image: url("images_popup/bordure_centre1.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
  }  
 
.cadre_popup_bas
{
   height: 31px;
   margin-left: 0px; 
   padding-top: 0px;
   background-image: url("images_popup/bordure_basse1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
  }

J'ai cherché et cherché, mais je ne vois pas mon erreur pour supprimer cet espace à droite et ainsi donc supprimer cette barre de défilement horizontale.
Merci à vous.

[Bovino]

Oui, ça vient de <div class="cadre_popup_centre">, il faut lui enlever le padding pour la largeur (width: 630px) et ça fonctionne.

[°°° Zen-Spirit °°°]

Merci encore Bovino !
Encore une fois, çà marche très bien. On peut dire que tu matrise vraiment ton sujet toi !!!!!!
Par contre, je ne comprends pas pourquoi 630 et non pas 700 px, puisque la largeur de mon cadre fait 700 px de même que l'image du cadre rouge !
Merci !

[Bovino]

Parce que la largeur du bloc = padding-left + width + padding-right,
donc ta div mesurait en fait 770px, d'où le débordement.

[°°° Zen-Spirit °°°]

Ha oui, c'est la première fois que j'ai à faire çà ce genre de calcul !!!
Normalement j'en ai fini avec les popup !
Merci encore ton aide précieuse et de faire partager tes connaissances !

[°°° Zen-Spirit °°°]

Salut tout le monde !
Salut Bovino !
Voilà, je e permets de revenir vers toi pour un petit soucis concernant toujours cette pop up.
En fait sur mon site j'ai des liens "FIL INFOS" qui permettent d'afficher des popp up lorsque l'on clique dessus.
Avec le même fichier CSS, ( serial-popup-killer.css ) l'affichage du cadre rouge à l'intérieur de la popup s'affiche différemment en effet, une barre horizontale apparait.
Je souhaiterai corriger çà, mais j'avaoue avoir un peu de difficulté.
Merci à vous.

Je vous laisse le lien de mon site et pour voir cette popup, faut aller dans la rubrique "fil info" faire descendre jusqu'au dernier et cliquer sur ce dernier lien, et là la popup dont e vous parle va apparaitre.
Ici mon site pour voir la popup

[Bovino]

La page de ta popup n'existe pas...

[°°° Zen-Spirit °°°]

Salut Bovino !
Oui désolé, il y a eu un soucis avec le Ftp lors du transfert du fichier sur le net.
C'est le lien "LIZARAZU" tout en bas.
Merci à toi.