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

**Claudine** · 16/03/2015, 14h32

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

**OButterlin** · 16/03/2015, 14h36

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 ?

**Claudine** · 16/03/2015, 18h37

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 php :

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

**OButterlin** · 16/03/2015, 19h48

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

Code css :

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

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 :

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

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 html :

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

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 html :

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

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>

**Claudine** · 17/03/2015, 18h55

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 php :

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

**OButterlin** · 18/03/2015, 08h46

Il faudrait supprimer la ligne

Code :

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

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

**Claudine** · 18/03/2015, 22h02

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 :

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

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

mais pas de changement
Sincères remerciements

Claudine

**OButterlin** · 19/03/2015, 08h55

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)

**Claudine** · 19/03/2015, 21h10

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

**OButterlin** · 20/03/2015, 08h45

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

Code :

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

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.

Invité · 20/03/2015, 19h54

Bonjour, pour faire un "pop in", utiliser la bibliothèque Jquery , et écrire

Code :

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

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

Alors, le contenu de votre div sera contenu dans une fenêtre. Exemple

**Claudine** · 21/03/2015, 07h39

Bonjour OButterlin

Envoyé par OButterlin

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

Code :

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

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

**OButterlin** · 21/03/2015, 18h48

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 :

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

**Claudine** · 25/03/2015, 07h09

Bonjour OButterlin

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 :

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

**OButterlin** · 25/03/2015, 08h45

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

Code :

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

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

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 :

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

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"; 
}

**Claudine** · 26/03/2015, 17h52

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

**OButterlin** · 27/03/2015, 08h20

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

)
Donc, le problème vient de la balise <script>, il suffit de remplacer

Code :

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

1
2
3
4
5
6
<script type="application/javascript">

par 

<script type="text/javascript">

Les voies d'IE sont impénétrables

**Claudine** · 28/03/2015, 19h18

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 :

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

$('#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

**NoSmoking** · 29/03/2015, 00h09

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 html :

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

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 css :

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
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 :

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
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 html :

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

**OButterlin** · 29/03/2015, 12h44

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

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

)

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

JavaScript

Discussions similaires

Partager

Partager