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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager