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à.