Affichage d'un popup a une position donnée

**kass28** · 26/05/2009, 19h40

Bonjour a tous,

J'ai une liste des bouttons et chacun d'eux ouvre un popup. Mon probleme c'est d'afficher le popup juste a la position du boutton qui l'ouvre. Ci joint le code de ma page test.html qui contient les bouttons et le popup ( c'est tres basique et c'est juste une page de test).

Dans le fichier "test.html" si je click sur le boutton "16" par exemple j'ai un popup qui s'affiche mais loin de ce boutton. Mon objectif c'est d'arriver a afficher le popup juste a la position du boutton "16" comme le montre la figure exemple.jpg

Tous les idées sont les bien venues

Merci en avance

Kass

**emmanuel.remy** · 27/05/2009, 01h55

Salut,

Récupère les coordonnées de ton objets: regarde le source JS.

Et le challenge c'est d'afficher aussi correctement quand ton bouton cible est en bas de la fenêtre, ce qui impliquerait avec un code standard que ton popup serait caché

ERE

**Walterbelo** · 27/05/2009, 02h15

Si l'utilisation de popup n'est pas impérative, une solution avec l'attribut visibility des CSS.
Voici une ébauche de solution, ou j'ai modifié les balises <A... pour les éléments 2 et 3. Bonne chance.

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
117
118
119
120
121
<html>
<head>
<title>telephony list</title>



<IFRAME STYLE="display:none;position:absolute;width:180;height:800;z-index:0;background-color:black;" ID=WindowInfoId MARGINHEIGHT=2 MARGINWIDTH=2 FRAMEBORDER=2 SCROLLING=YES></IFRAME>

<script LANGUAGE="JAVASCRIPT">
var dernier;     // Dernier span rendu visible
var yauvis=0;


var WIcF2 = parent.document.all.WindowInfoId ;
var WIcW2 = parent.window.frames.WindowInfoId ;

function WinInfoId_Position_lists2()
{
	
  var vWidth 	= 270;
	var vHeight 	= 270;
	var vTop 	= 7;
	var vLeft 	= (screen.availWidth-700)-7 	;
	WIcF2.style.top  		= vTop 

	WIcF2.style.left  		= vLeft 
	WIcF2.style.height 	= vHeight 			
	WIcF2.style.Width 		= 100; 
	WIcF2.style.backgroundcolor="#ccff66";

	
} 

function WinInfoId_Hide()
{
      //alert( " WinInfoId_Hide");

      WIcF2.style.display = "none";
  //alert( " WinInfoId_Hide2");
}




function GetPhoneList(ida)
{
	if (yauvis > 0) {dernier.className="invisible";}
  ida.className="visible";
  yauvis=1;
  dernier=ida;

var tmp="";			
tmp = tmp + "<html><head><title>telephony list</title></head><body STYLE='background-color:black;'><table border=0 name='result' ><tr VALIGN='BOTTOM' bgcolor='#DEDEEF' height='22'><td colspan='3' width='180'><p align='center'><b><font face='MS Sans Serif' size='1'>List Of Free Numbers</font></b></td></tr>";

for (i = 0 ; i <= 15 - 1 ; i++)
{
				
									
    result0 =  "<td><p align='center'><b><font face='MS Sans Serif' size='1'>"+ i + " </font></b></td>";
    tmp=tmp+"<tr height='22' ";
    if (i % 2==0)
    {
       tmp = tmp + "bgcolor='#EDEDF6' ";
    }
    else
    {
       tmp = tmp + "bgcolor='#FFFFCC' ";
    }
			
    //tmp = tmp + "ondblclick=javascript:parent.window.document.formulaire.INDN.value='"+ i+"';parent.WinInfoId_Hide();> "+result0+"</tr>";
     tmp = tmp + "ondblclick=javascript:parent.WinInfoId_Hide();> "+result0+"</tr>";
					
}	
tmp = tmp + "</table></body></html>";


WinInfoId_Position_lists2();
WIcW2.document.body.innerHTML 	= tmp;
WIcF2.style.display		= "block";



}

</script>
<SCRIPT FOR=document EVENT="onclick()">
WinInfoId_Hide(); 
</SCRIPT>
<STYLE type="text/css">
SPAN.invisible {visibility:hidden;}
SPAN.visible   {visibility:visible;}	
</STYLE>	



</head>
<body STYLE='background-color:black;'>
<form id=formulaire name=formulaire METHOD=POST>

<TR VALIGN=BOTTOM>

<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="1" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="2" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList(im2)"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;<span id="im2" class="invisible"> Ici image 2</span></font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="3" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href='JavaScript:GetPhoneList(im3)'><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;<span id="im3" class="invisible"> Ici image 3</span></font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="4" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="5" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="6" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="7" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="8" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="9" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="10" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="11" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList(11)"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="12" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList(12)"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="13" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="14" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="15" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
<FONT color="Gray" face="Verdana" size="1"><b><font face="Verdana" size="1"><input name="INDN" value="16" size="12" style="font-family: Verdana; font-size: 8pt; font-weight: bold; text-align: Center; background-color: #DEDEEF" >&nbsp;&nbsp;<a href="JavaScript:GetPhoneList()"><img border="0" src="../../Images/checkin.gif" alt="Free Phone Number" width="20" height="20" align="top"></a>&nbsp;</font><br>
</TR>
</FORM>
</body>
</html>

Affichage d'un popup a une position donnée

JavaScript

Discussions similaires

Partager

Partager