Comment créer une pop-in afin de charger une div info ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/03/2015, 14h32
Claudine

Comment créer une pop-in afin de charger une div info ?

Bonjour à tous
Je ne vois aucune informations ni tutoriels dans ce forum pour créer une véritable pop-in qui devrait s'afficher dans la même page que mon tableau HTML après clic d'une valeur de ce dernier pour faire apparaître l'infos.
Cette info apparaît pour l'instant dans une div qui s'affiche au-dessus du tableau.
Un spécialiste dans ce domaine pourrait-il m'aider? car je n'y arrive pas.

Claudine
16/03/2015, 14h36
OButterlin

Quelle techno et/ou quel framework ?

Les données à afficher sont présentent dans la page ou il faut aller les chercher par un appel ajax ?

Merçi OButterlin pour cette réponse.
Je vais chercher dans une base de données les différentes informations que j'affiche dans un tableau HTML. Comme vous pouvez le voir dans le code ci-dessous, il me suffit de cliquer sur une ligne de la colonne "MaPage" pour faire apparaître l'"INFOS" correspondante dans une Div que j'ai encadré et qui s'affiche en haut(au-dessus du tableau)

Code:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="http://www.w3.org/1999/xhtml"><head>
 
<title>Déclarer un DIV et lui associer un style</title>
 
 
<style type="text/css">
.monbloc{
 
   width:250px; /* Largeur du bloc */
   height:150px; /* Hauteur du bloc */
   padding:5px; /* Marges intérieures */
   border: 4px solid gray; /* bordure en pointillé, d'un pixel et en gris */
   font-family:"century gothic";
   font-size:16px;
} 
.info{
   font-family:arial;
   font-size:20px;
   color:#ff9900;
} 
</style>
 
<meta http-equiv="Content-Type" content="text/html;  charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript">/* <![CDATA[ */
function show_info(text) {
	var ele = document.getElementById('info');
	ele.innerHTML = text;
} 
/* ]]> */</script> 
 
 
 
<div class="monbloc">
 
<span class="info"> <div id="info"></div>
</div>
 
</head> 
</html>
 
 
<?php
 
$host = 'localhost';
$user = 'root';
 
$pass = '';
$db = 'clients';
 
// connection à la DB
$link = mysql_connect ($host,$user,$pass,$db) or die ('Erreur : '.mysql_error() );
mysql_select_db($db) or die ('Erreur :'.mysql_error());
       $select = "SELECT selection, nom , MaPage,infos FROM coordonnees where selection ='horticulteur'";
 
 
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );
$total = mysql_num_rows($result);
 
 
echo '<div id="info"></div>'; 
 
// si on a récupéré un résultat on l'affiche.
if($total) {
    // debut du tableau
 
    echo '<table bgcolor="FFFFFF">'."\n";
        // première ligne on affiche les titres prénom et surnom dans 2 colonnes
        echo '<tr>';
 
		echo '<td bgcolor="#669999"><b><u>selection</u></b></td>';
        echo '<td bgcolor="#669999"><b><u>nom</u></b></td>';
      	echo '<td bgcolor="#669999"><b><u>MaPage</u></b></td>';
		echo '</tr>'."\n";
    // lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne.    
    while($row = mysql_fetch_array($result)) {
        echo '<tr>';
		;
		echo '<td bgcolor="#CCCCCC">'.$row["selection"].'</td>';
        echo '<td bgcolor="#90EE90">'.$row["nom"].'</td>';
 
		echo'<td bgcolor="#CCCCCC" onClick="show_info(\'' . addslashes($row['infos']) . '\')">'.$row["MaPage"].'</a></td>';
 
 
 
 
		echo '</tr>'."\n";
    }
    echo '</table>'."\n";
    // fin du tableau.
}
else echo 'Pas d\'enregistrements dans cette table...';
 
// on libère le résultat
mysql_free_result($result);
?> 
 
</body>
</html>

J'espère m'avoir fait comprendre
Sincères remerciements pour votre collaboration

Claudine

Tu y es presque, je rajouterai ceci à ta classe de style

Code:

1
2
3
4
5
6
7
8
9
.monbloc{
   display:none; 
   width:250px; /* Largeur du bloc */
   height:150px; /* Hauteur du bloc */
   padding:5px; /* Marges intérieures */
   border: 4px solid gray; /* bordure en pointillé, d'un pixel et en gris */
   font-family:"century gothic";
   font-size:16px;
}

pour que le bloc ne soit pas affiché par défaut.
Ensuite, tu n'as plus qu'à faire

Code:

1
2
3
4
5
6
7
8
9
10
11
function showInfo(text) {
   var ele = document.getElementById('info');
   ele.innerHTML = text;
   var popup = document.getElementById("popup");
   popup.style.display = "block";
} 
function hideInfo()
{
   var popup = document.getElementById("popup");
   popup.style.display = "none";
}

Avec une petite modification dans ta page

Code:

1
2
3
<div id="popup" class="monbloc" onclick="hideInfo()">
    <div id="info" class="info"></div>
</div>

Attention aussi à la structure de ta page, elle devrait être comme ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
<html>
 
<head>
// tes classes de style et le javascript
</head>
 
<body>
// le contenu de la page proprement dit, et c'est ici qu'il faut mettre la div "popup".
</body>
 
</html>

Bonsoir OButterlin ,
je suis heureuse de voir votre participation active à mon problème.
Comme je suis très loin de dominer le sujet, je me permets de joindre copie du logiciel avec les transformations que vous m'avez conseillées pour vous voir si tout est bien placé., car j'hésite pour le javascript.Est-il correct,ou dois-je enregistrer à la racine un Javascript particulier?
Si je vous pose cette question, c'est parce que cela ne fonctionne pas( aucune réaction pour le oncklic sur la colonne PageInfo et par conséquent pas d'affichage
d'infos ni de pop-up).

Code:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 
<style type="text/css">
.monbloc{
 display:none;  
   width:250px; /* Largeur du bloc */
   height:150px; /* Hauteur du bloc */
   padding:5px; /* Marges intérieures */
   border: 4px solid gray; /* bordure en pointillé, d'un pixel et en gris */
   font-family:"century gothic";
   font-size:16px;
} 
.info{
   font-family:arial;
   font-size:20px;
   color:#ff9900;
} 
</style>
 
<script type="text/javascript">
 
function show_Info(text) {
	var ele = document.getElementById('info');
	ele.innerHTML = text;
    var popup = document.getElementById("popup");
    popup.style.display = "block";
}	
function hideInfo()
{
    var popup = document.getElementById("popup");
    popup.style.display = "none";	
}
</script> 
 
 
</head>
<body>
     <div id="popup" class="monbloc" onClick="hideInfo()">
 
     <div id="info" class="info">
	 </div>
</div>
</body>
 
 
 
<?php
 
$host = 'localhost';
$user = 'root';
 
$pass = '';
$db = 'clients';
 
// connection à la DB
$link = mysql_connect ($host,$user,$pass,$db) or die ('Erreur : '.mysql_error() );
mysql_select_db($db) or die ('Erreur :'.mysql_error());
       $select = "SELECT selection, nom , MaPage,infos FROM coordonnees where selection ='horticulteur'";
 
 
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );
$total = mysql_num_rows($result);
 
 echo '<div id="info"></div>'; 
 
 
// si on a récupéré un résultat on l'affiche.
if($total) {
    // debut du tableau
 
    echo '<table bgcolor="FFFFFF">'."\n";
        // première ligne on affiche les titres prénom et surnom dans 2 colonnes
        echo '<tr>';
 
		echo '<td bgcolor="#669999"><b><u>selection</u></b></td>';
        echo '<td bgcolor="#669999"><b><u>nom</u></b></td>';
      	echo '<td bgcolor="#669999"><b><u>MaPage</u></b></td>';
		echo '</tr>'."\n";
    // lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne.    
    while($row = mysql_fetch_array($result)) {
        echo '<tr>';
		;
		echo '<td bgcolor="#CCCCCC">'.$row["selection"].'</td>';
        echo '<td bgcolor="#90EE90">'.$row["nom"].'</td>';
 
		echo'<td bgcolor="#CCCCCC" onClick="show_info(\'' . addslashes($row['infos']) . '\')">'.$row["MaPage"].'</a></td>';
 
 
 
 
		echo '</tr>'."\n";
    }
    echo '</table>'."\n";
    // fin du tableau.
}
else echo 'Pas d\'enregistrements dans cette table...';
 
// on libère le résultat
mysql_free_result($result);
?> 
 
 </html>

Au plaisir de vous relire et grand merci.

Claudine

18/03/2015, 08h46
OButterlin
Il faudrait supprimer la ligne
Code:

1 2 echo '<div id="info"></div>';
parce que là, tu as 2 fois un composant dont l'ID est "info".

Il faudrait également mettre la balise </body> (juste avant </html>) à la fin de ta page, le tableau que tu génères par php en faisant partie
18/03/2015, 22h02
Claudine

Bonsoir OButterlin ,
j'ai apporté les modifications demandées ,mais toujours rien qui s'affiche.
Ci-dessous le code d'erreur affiché dans la console de firefox: (si ça peut vous aider)
ReferenceError: show_info is not defined

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

popup.php (ligne 1).
J'ai chargé à la racine

Code:

<script type="text/javascript" src="jquery.js"></script>

mais pas de changement
Sincères remerciements

Claudine
19/03/2015, 08h55
OButterlin

Oui, c'est normal, si tu regardes bien le code de ta page, la méthode se nomme show_Info(...)
(avec un i majuscule)

Ensuite, si ça ne fonctionne toujours pas après cette modification, peux-tu mettre le code de ta page tel qu'il est reçu par le navigateur ?
Le plus simple est de faire un click-droit sur la page et utiliser l'option "Code source de la page" (sur Firefox, pour d'autres navigateurs, le texte sera peut-être différent)
19/03/2015, 21h10
Claudine

Bonsoir OButterlin ,

Bien vu, cela fonctionne, mais la div info est toujours indiquée dans le cadre en haut de la page qui affiche le tableau HTML c'est-à-dire comme avant et non en avant plan au-dessus du tableau comme une pop-in?

Voulez-vous regarder où se situe le problème?
Sincères remerciements OButterlin

Claudine
20/03/2015, 08h45
OButterlin
Dans la classe de style ".monbloc", il faut rajouter l'attribut
Code:

1 2 z-index:10;
Le paramètre sert à définir une "couche" d'affichage, par défaut, il doit prendre la valeur 0 (je suppose, parce que le défaut de l'attribut est "auto"), donc toute valeur supérieure fera que ça s'affiche sur une couche au-dessus.
20/03/2015, 19h54
Invité
Bonjour, pour faire un "pop in", utiliser la bibliothèque Jquery , et écrire
Code:

1 2 $('#iddevotrediv').dialog();
Alors, le contenu de votre div sera contenu dans une fenêtre. Exemple
21/03/2015, 07h39
Claudine
Bonjour OButterlin
Citation:
Envoyé par OButterlin

Dans la classe de style ".monbloc", il faut rajouter l'attribut

Code:

1 2 z-index:10;

Le paramètre sert à définir une "couche" d'affichage, par défaut, il doit prendre la valeur 0 (je suppose, parce que le défaut de l'attribut est "auto"), donc toute valeur supérieure fera que ça s'affiche sur une couche au-dessus.
Merci pour ton aide, mais malheureusement, rien ne change, le bloc s'affiche toujours en haut de page puis en-dessous le tableau html. Or j'aimerais que le bloc s'affiche au-dessus de mon tableau HTMl (en premier plan) sans rechargement de la page pour la raison simple que lorsque j'ai beaucoup d'enregistrements dans le tableau, le clients est obligé de remonter vers le haut de la page pour voir l'affichage de l'info dans le bloc.
Je ne doute pas que vous allez trouver la solution
Bonne journée
Claudine

A vrai dire, j'essayais juste de faire fonctionner ton code, je n'avais pas fait attention que tu voulais une fenêtre flottante.
Bref, c'est un tout petit peu plus compliqué parce qu'il faut positionner ta popup en fonction de l'endroit où tu cliques et il faut en plus tenir compte de l'éventuel scoll de ta page (si le contenu dépasse la taille de l'écran)
Voici un exemple qui fonctionnera sur les navigateurs modernes et qui répond à ton besoin (plus qu'à l'adapter à ton code)

Code:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!DOCTYPE HTML5> 
<html> 
 
<head> 
 
<script type="application/javascript"> 
function showPopup(evt, text) 
{ 
    var top = evt.clientY + document.body.scrollTop; 
    var left = evt.clientX + document.body.scrollLeft; 
    var p = document.getElementById("popup"); 
    p.innerHTML = text; 
    p.style.top = top; 
    p.style.left = left; 
    p.style.display = "inline"; 
} 
 
function hidePopup() 
{ 
    document.getElementById("popup").style.display = "none"; 
} 
</script> 
 
 
<style> 
.popup{ 
    position:absolute; 
    z-index : 2; 
    display : none; 
    border-style:solid; 
    border-width:1px; 
    border-color:#909090; 
    background:#f0f0f0;
    padding:5px;
    border-radius: 25px; 
}
table{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    border-collapse: collapse;
}
th{
    background:#000000;
    color:#ffffff;
    border-width:0px;
}
td{
    padding:3px;
    border-width:1px;
    border-style:solid;
    border-color:#909090;
}
.hasInfo{
    cursor: pointer;
} 
</style> 
 
</head> 
 
<body> 
 
<div id="popup" class="popup" onclick="hidePopup()"></div> 
 
<table> 
    <tr> 
        <th>Nom</th> 
        <th>Adresse</th> 
    </tr> 
 
    <tr> 
        <td class="hasInfo" onclick="showPopup(event, 'Elle sera présente en Italie cet été')">Mina UGOLIN</td> 
        <td>Quelque part en Alsace</td> 
    </tr> 
    <tr> 
        <td class="hasInfo" onclick="showPopup(event, 'Il a pris la fonction de PDG de la société Rel\'Action')">Stéphane COHEN</td> 
        <td>Près de Bâle</td> 
    </tr> 
 
</table> 
 
</body> 
</html>

Bonjour OButterlin

Citation:

Envoyé par OButterlin

Voici un exemple qui fonctionnera sur les navigateurs modernes et qui répond à ton besoin (plus qu'à l'adapter à ton code)

En effet, ce logiciel est impeccable et fonctionne avec le navigateur Firefox mais pas avec IExplore7.0.
Quand à "Plus qu'à l'adapter à mon code",c'est une autre chose que j'ai essayé depuis 4 jours. Je n'arrive pas à définir le showPopup avec le show_info (2 onclick?), ce dernier étant obligatoire puisqu'il va chercher l'info dans ma bdd.
Sans votre aide, ce problème est pour moi insoluble.
Voulez-vous m'aider à résoudre ce problème?
çi dessous le code:

Code:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
<!DOCTYPE HTML5>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<html> 
 
<head> 
 
 
<script type="application/javascript"> 
 
 
 
function showPopup(evt, text) 
{ 
    var top = evt.clientY + document.body.scrollTop; 
    var left = evt.clientX + document.body.scrollLeft; 
    var p = document.getElementById("popup"); 
 
    p.innerHTML = text; 
    p.style.top = top; 
    p.style.left = left; 
    p.style.display = "inline"; 
} 
 
function hidePopup() 
{ 
    document.getElementById("popup").style.display = "none"; 
} 
</script> 
 
 
<style> 
.popup{ 
    position:absolute; 
    z-index : 2; 
    display : none; 
    border-style:solid; 
    border-width:1px; 
    border-color:#909090; 
    background:#f0f0f0;
    padding:5px;
    border-radius: 25px; 
}
table
 
.hasInfo{
    cursor: pointer;
}
 
<\table> 
</style> 
 
</head> 
 
<body> 
 
<div id="popup" class="popup" onClick="hidePopup()"></div> 
 
 
 <?php
 
$host = 'localhost';
$user = 'root';
 
$pass = '';
$db = 'clients';
 
// connection à la DB
$link = mysql_connect ($host,$user,$pass,$db) or die ('Erreur : '.mysql_error() );
mysql_select_db($db) or die ('Erreur :'.mysql_error());
       $select = "SELECT selection, nom , MaPage,infos FROM coordonnees where selection ='horticulteur'";
 
 
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );
$total = mysql_num_rows($result);
 
 // si on a récupéré un résultat on l'affiche.
if($total) {
    // debut du tableau
 
    echo '<table bgcolor="FFFFFF">'."\n";
                echo '<tr>';
 
		echo '<td bgcolor="#669999"><b><u>selection</u></b></td>';
        echo '<td bgcolor="#669999"><b><u>nom</u></b></td>';
      	echo '<td bgcolor="#669999"><b><u>MaPage</u></b></td>';
		echo '</tr>'."\n";
    // lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne.    
    while($row = mysql_fetch_array($result)) {
        echo '<tr>';
		;
		echo '<td bgcolor="#CCCCCC">'.$row["selection"].'</td>';
        echo '<td bgcolor="#90EE90">'.$row["nom"].'</td>';
 
		echo'<td bgcolor="#CCCCCC"onClick="show_info(\'' . addslashes($row['infos']) . '\')">'.$row["MaPage"].'</a></td>';
 
 
 
 
		echo '</tr>'."\n";
    }
    echo '</table>'."\n";
    // fin du tableau.
}
else echo 'Pas d\'enregistrements dans cette table...';
 
// on libère le résultat
mysql_free_result($result);
 
?> 
</body>
 
 
 </html>

Mes plus vifs remerciements pour votre aide précieuse.

Claudine

Pour le problème de showInfo au lieu de show_info, tu n'as qu'à modifier cette ligne
Code:

1 2 3 4 5 6 echo'<td bgcolor="#CCCCCC"onClick="show_info(\'' . addslashes($row['infos']) . '\')">'.$row["MaPage"].'</a></td>'; en echo'<td bgcolor="#CCCCCC"onClick="showPopup(event, \'' . addslashes($row['infos']) . '\')">'.$row["MaPage"].'</a></td>';
(ou modifier le nom de la méthode de showPopup en show_info, mais il faudra ajouter l'argument "event" à l'appel quand même)

Pour le problème de compatibilité, je n'ai pas IE7, difficile de dire ce qui ne fonctionne pas... et c'est vraiment une version préhistorique :aie:

Il se pourrait que le problème vienne de l'objet "event" mais il faudrait que tu vois avec le debugger de IE (en espérant qu'il y en ait un) pour confirmer.
En attendant, tu peux essayer cette varirante
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function showPopup(evt, text) { if (window.event) { evt = window.event; } var top = evt.clientY + document.body.scrollTop; var left = evt.clientX + document.body.scrollLeft; var p = document.getElementById("popup"); p.innerHTML = text; p.style.top = top; p.style.left = left; p.style.display = "inline"; }

26/03/2015, 17h52
Claudine

1 pièce(s) jointe(s)

Bonjour OButterlin ,
En premier lieu, laissez-moi vous féliciter pour votre compétence qui est remarquable car à chaque question, on a une réponse claire, précise et toujours fonctionnelle.C'est tout simplement exceptionnel et rare! et cela me permet d'apprendre énormément de choses.
Bref avec Firefox c'est parfait! Je suppose que la majorité des gens ont ce navigateur ou un IE plus récent car moi je suis toujours sous windowsXP...... c'est vieux et c'est comme mon âge.
J'ai trouvé sur internet DebugBar pour internet explorer et il me signale une erreur de script dont je vous livre une copie d'écran çi-jointe:erreur script.doc.
J'ai essayé la variante mais cela fonctionne sousfirefox mais pas sous IE7
Encore une fois mille remerciements

Claudine
27/03/2015, 08h20
OButterlin
Citation:

Envoyé par Claudine

Bonjour OButterlin ,
En premier lieu, laissez-moi vous féliciter pour votre compétence qui est remarquable car à chaque question, on a une réponse claire, précise et toujours fonctionnelle.C'est tout simplement exceptionnel et rare! et cela me permet d'apprendre énormément de choses.
Bref avec Firefox c'est parfait! Je suppose que la majorité des gens ont ce navigateur ou un IE plus récent car moi je suis toujours sous windowsXP...... c'est vieux et c'est comme mon âge.

Merci pour ces compliments, ça fait plaisir ;)

Pour le problème, j'ai réussi à trouver une vielle machine avec un Windows XP et un IE8. Certes, ce n'est pas la même version du navigateur, mais fort heureusement, il m'a fait la même erreur (c'est un comble de dire fort heureusement pour une erreur :mouarf:)
Donc, le problème vient de la balise <script>, il suffit de remplacer
Code:

1 2 3 4 5 6 <script type="application/javascript"> par <script type="text/javascript">
Les voies d'IE sont impénétrables :roll:
28/03/2015, 19h18
Claudine

Bonsoir OButterlin,
Une fois de plus, je reste rêveur face à une telle compétence.
Pour mon instruction,voulez-vous me dire quel est le rapport avec l'erreur citée par le debugger sous IE? Je suppose qu'il s'agit de l'objet 'texte' et non 'application'.
J'ai soif de connaître diverses résolutions de réaliser une pop-in dont celle proposée par MoumouteMasters le 20/03 à savoir:

Code:

$('#iddevotrediv').dialog();

tout en utilisant la bibliothèque Jquery .
J'avais utiliser dans mon précedent logiciel la bibliothèque Jquery mais je n'ai pas eu de résultat positif .Où introduire cette fameuse ligne de code?

Merci OButterlin et veuillez accepter toute ma reconnaissance.

Claudine

Bonjour,je vais te proposer une autre solution sur base de la séparation des couches HTML/CSS/JS et qui fonctionnait sur IE6. Cette solution est juste dépoussiérée pour être mise au goût du jour.

Ici on met toutes les données dans le code HTML car à priori elles sont pertinentes est doivent donc faire partie de celui ci.
D'après ce que j'ai lu cela pourrait s’écrire de la façon suivante

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <th>Nom</th>
        <th>Adresse</th>
    </tr>
    <tr>
        <td class="hasInfo"><span class="info">!<span>Elle sera présente en Italie cet été<br><b>C'est super!</b></span></span>Mina UGOLIN</td>
        <td>Quelque part en Alsace</td>
    </tr>
    <tr>
        <td class="hasInfo"><span class="info">!<span>Il a pris la fonction de PDG de la société <b>Rel'Action</b></span></span>Stéphane COHEN</td>
        <td>Près de Bâle</td>
    </tr>
</table>

ceci étant posé on ajoute un peu de cosmétique via le CSS, tout n'est pas important

Code:

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
49
50
body {
    width:100%;
    margin:1em;
    padding:0;
    font:100%/150% Verdana,sans-serif;
}
table {
    border:1px solid #CCC;
    border-collapse:collapse;
}
th {
    background:#EEF;
}
th,td {
    padding:.25em;
    border: 1px solid #CCC;
}
.info {
    float:right;
    position:relative;  /* impératif */
    font-size:1.5em;
    font-weight:bold;
    color:#CCC;
    text-align:center;
    width:1em;
    height:1em;
    cursor:pointer;
}
.info:hover {
    color:#0C0;
    font-style:italic;
}
.info span {
    display:none;
}
#bulle {
    position:absolute;
    display:none;
    font-size:0.8em;
    padding:0.5em;
    margin:1em;     /* décalage de la position */
    background-color:#ffb;
    border:1px solid #fa8;
    cursor:pointer;
}
.hasInfo {
    white-space:nowrap;
    width:15em;
    min-width: 15em;
}

enfin vient la partie javascript que je te livre avec commentaires

Code:

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
var oTable = document.getElementsByTagName('TABLE')[0], // récup. la 1st TABLE du document
    lstSpan = oTable.getElementsByTagName('SPAN'),      // récup des SPAN enfant
    oBulle, i, nbSpan = lstSpan.length;
for( i=0; i <nbSpan; i++){
  // si SPAN concerné
  if( lstSpan[i].className == 'info'){
    // action sur événement clic
    lstSpan[i].onclick = function(){
        // récup le contenu du SPAN après le ! et met dans DIV 'bulle'
        oBulle.innerHTML = this.firstChild.nextSibling.innerHTML;
        // positionnement
        oBulle.style.left = this.offsetLeft +'px'
        oBulle.style.top  = this.offsetTop  +'px';
        // affichage
        oBulle.style.display = 'block';
      };
  }
}
// Création de l'info bulle
oBulle = document.createElement('DIV');
oBulle.id = 'bulle';
oBulle.title = ' Cliquez pour fermer !';
// ajout au document
document.body.appendChild( oBulle);
// action sur événement clic
oBulle.onclick = function(){
    this.style.display = 'none';
  };

Cela pourrait être affiné grâce aux nouvelles méthodes mais pour rester compatible -IE8 on ne peut pas les utiliser.

Le fichier complet de test

Code:

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>InfoBulle au clic</title>
<meta name="Author" content="NoSmoking">
<style>
body {
    width:100%;
    margin:1em;
    padding:0;
    font:100%/150% Verdana,sans-serif;
}
table {
    border:1px solid #CCC;
    border-collapse:collapse;
}
th {
    background:#EEF;
}
th,td {
    padding:.25em;
    border: 1px solid #CCC;
}
.info {
    float:right;
    position:relative;  /* impératif */
    font-size:1.5em;
    font-weight:bold;
    color:#CCC;
    text-align:center;
    width:1em;
    height:1em;
    cursor:pointer;
}
.info:hover {
    color:#0C0;
    font-style:italic;
}
.info span {
    display:none;
}
#bulle {
    position:absolute;
    display:none;
    font-size:0.8em;
    padding:0.5em;
    margin:1em;     /* décalage de la position */
    background-color:#ffb;
    border:1px solid #fa8;
    cursor:pointer;
}
.hasInfo {
    white-space:nowrap;
    width:15em;
    min-width: 15em;
}
</style>
</head>
<body>
<table>
    <tr>
        <th>Nom</th>
        <th>Adresse</th>
    </tr>
    <tr>
        <td class="hasInfo"><span class="info">!<span>Elle sera présente en Italie cet été<br><b>C'est super!</b></span></span>Mina UGOLIN</td>
        <td>Quelque part en Alsace</td>
    </tr>
    <tr>
        <td class="hasInfo"><span class="info">!<span>Il a pris la fonction de PDG de la société <b>Rel'Action</b></span></span>Stéphane COHEN</td>
        <td>Près de Bâle</td>
    </tr>
</table>
<script>
var oTable = document.getElementsByTagName('TABLE')[0], // récup. la 1st TABLE du document
    lstSpan = oTable.getElementsByTagName('SPAN'),      // récup des SPAN enfant
    oBulle, i, nbSpan = lstSpan.length;
for( i=0; i <nbSpan; i++){
  // si SPAN concerné
  if( lstSpan[i].className == 'info'){
    // action sur événement clic
    lstSpan[i].onclick = function(){
        // récup le contenu du SPAN après le ! et met dans DIV 'bulle'
        oBulle.innerHTML = this.firstChild.nextSibling.innerHTML;
        // positionnement
        oBulle.style.left = this.offsetLeft +'px'
        oBulle.style.top  = this.offsetTop  +'px';
        // affichage
        oBulle.style.display = 'block';
      };
  }
}
// Création de l'info bulle
oBulle = document.createElement('DIV');
oBulle.id = 'bulle';
oBulle.title = ' Cliquez pour fermer !';
// ajout au document
document.body.appendChild( oBulle);
// action sur événement clic
oBulle.onclick = function(){
    this.style.display = 'none';
  };
</script>
</body>
</html>

Pour finir, comme tu utilises jQuery c'est bien le diable si tu ne trouves pas un plugin adapté à ton besoin comme par exemple https://jqueryui.com/tooltip/.

29/03/2015, 12h44
OButterlin

Citation:

Envoyé par NoSmoking

Bonjour,je vais te proposer une autre solution sur base de la séparation des couches HTML/CSS/JS et qui fonctionnait sur IE6. Cette solution est juste dépoussiérée pour être mise au goût du jour.
...
Pour finir, comme tu utilises jQuery c'est bien le diable si tu ne trouves pas un plugin adapté à ton besoin comme par exemple https://jqueryui.com/tooltip/.

Sans douter du fait que ça fonctionnera certainement, on ne peut pas dire que ce soit la solution la plus limpide qui soit :mrgreen:

Pour le plugin jQuery, oui, pourquoi pas... mais je trouve tout de même leur solution étrange dans la mesure où l'attribut "title" sur une balise html engendrera forcément le comportement demandé (l'info-bulle) à lui tout seul... c'est plus de la cosmétique du coup...

Personnellement, j'utilise jQuery pour l'aspect abstraction des spécificités du javascript par navigateur, pas pour les plugins... (ceci dit, c'est parce que j'utilise Primefaces, et derrière, c'est bien du jQuery UI ;))

Voir 40 message(s) de cette discussion en une page