Discussion :

[n1k00]

Bonjour,
Je sais pas si je suis dans le bon topic donc je m'en excuse d'avance
Voilà je suis actuellement en train de développer une webapp et sous android je rencontre un problème avec une pop up faite par moi même.
Dans cette pop-up j'ai deux liens et quand je l'affiche par dessus du contenu ayant des liens. Lorsque je clique soit aucun de mes liens n'est pris en compte ou alors cela me sélectionne le lien qui est situé derrière la pop-up.

Merci d'avance

[NoSmoking]

Bonjour,
un peu de mal a cerné ton problème suite à tes explications.

Un peu de code aiderait sûrement à la compréhension, l'essentiel il va de soi.

[n1k00]

Je ne peux pas spécialement montrer du code car ma pop-up est censé pourvoir apparaitre sur toutes les pages. Mais je vais essayer d'être plus claire.

Donc pour commencer j'ai une pop-up en position absolute qui s'affiche par dessus l'ensemble de mon site. Cette pop-up est composé de trois lien <a></a>.
J'arrive à parfaitement afficher ma pop-up sur mon site. Le problème que j'ai viens des liens dans ma pop-up.
Mon problème vient lorsque la pop-up s'affiche par dessus une page qui comporte des liens et que ces liens se retrouvent dessous ceux de la pop-up.
En effet quand j'ai ce cas de figure quand je clique sur un des liens de la pop-up celui qui sera pris en compte sera celui de la page et non de la pop up.

Pour faire simple si sur ma page j'ai les liens 1,2,3,4,5. Et sur ma pop-up j'ai mes liens A,B et C. Qu'a l'affichage le lien A se retrouve sur le 2, le B sur 4 et le C sur le 5. Si je clique sur le lien B ça me fera comme si j'avais cliqué sur le 4.

Voila j'espère que j'ai pu être plus explicite.

[NoSmoking]

Je ne peux pas spécialement montrer du code car ma pop-up est censé pourvoir apparaitre sur toutes les pages. Mais je vais essayer d'être plus claire.

dommage !! même pas le style ?

Mon problème vient lorsque la pop-up s'affiche par dessus une page qui comporte des liens et que ces liens se retrouvent dessous ceux de la pop-up.
En effet quand j'ai ce cas de figure quand je clique sur un des liens de la pop-up celui qui sera pris en compte sera celui de la page et non de la pop up.

de toute évidence si le lien du dessous prend le pas sur le lien du dessus c'est qu'il est dessus
- essaies de mettre un z-index sur le style de la DIV(?) popup,
- ou encore essaies en mettant un fond de couleur sur les liens, différent entre le dessous et le dessus, pour voir quels liens sont réellement dessus,
- ou encore met un background-color à ta popup, le fond ne devrait pas apparaître.
- ou encore ...

[n1k00]

J'ai déjà mis des z-index où je pouvais. Tiens voici le CSS et le code html/php/js de ma pop-up (hier je l'avais pas sous la main)

Code CSS :

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
.layout { width:100%; height:100%; z-index:10; position:fixed; top:0; left:0; background-image:url('images/layout.png'); }
.popup_container { position:absolute; top:90px; left:30px; z-index:11; right:30px}
 
.popup_container table { width:100%; }
.popup_container table td { background-repeat:no-repeat; }
.popup_container table td.top_left { background-image:url('images/pop_up_top.png'); background-position:top left; height:11px; width:11px; }
.popup_container table td.top_right { background-image:url('images/pop_up_top.png'); background-position:top right; height:11px; width:11px; }
.popup_container table td.top_mid { background-image: url('images/pop_up_top.png'); background-position:bottom left; background-repeat:repeat-x; height:11px; padding:0;}
 
.popup_container table td.mid_left { background-image:url('images/pop_up_side.png'); background-position:top left; background-repeat:repeat-y; width:11px; }
.popup_container table td.mid_right { background-image:url('images/pop_up_side.png'); background-position:top right; background-repeat:repeat-y; width:11px; }
.popup_container table td.mid_mid { background-color:#d826ac; color:#fff; }
 
.popup_container table td.bot_left { background-image:url('images/pop_up_bot.png'); background-position:bottom left; width:11px; height:11px; }
.popup_container table td.bot_right { background-image:url('images/pop_up_bot.png'); background-position:bottom right; width:11px; height:11px; }
.popup_container table td.bot_mid { background-image:url('images/pop_up_bot.png'); background-position:top left; background-repeat:repeat-x; height:11px; }
 
.popup table{width:50%; text-align:center;margin: auto}
 
.popup .close_btn { background-image:url('images/picto_sprite.png'); background-repeat:no-repeat; background-position:0 -445px; display:block; position:absolute; height:20px; width:19px; top:8px; right:8px; }
.popup h3 { margin:0 15px 10px; font-size:13px; font-weight:bold; color:#FFFFFF; }
.popup p { margin:0 15px 0; font-size:11px; font-weight:bold; color:#FFFFFF; text-align:center}
.popup_container #popup_bt1, .popup_container #popup_bt2{z-index:12;}

HTML

Code xhtml :

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
 
<div id="popup_layout" class="layout">&nbsp;</div>
<div id="popup" class="popup_container">
  <div style="position: relative;">
	  <a id="popup_close" class="close_btn" href="http://nroux.mwk.membre.mediakiosque.dev.hi-media-techno.com/liste-favoris"></a>
	  <table cellspacing="0" cellpadding="0">
	    <tbody>
	      <tr>
	        <td class="top_left"></td>
	        <td class="top_mid"></td>
	        <td class="top_right"></td>
	      </tr>
	      <tr>
	        <td class="mid_left"></td>
	        <td class="mid_mid popup">
		        <h3>Titre</h3>
		        <p>Texte.</p>
		        <table>
				<tbody>
					<tr>
			        		<td>
			        			<a id="popup_bt1" class="btn_dark_grey left" href="">
			        				<span class="btn_dark_grey right">
			        					<span class="btn_dark_grey middle">
			        						Bouton 1			        						
									</span>
			        				</span>
			        			</a>
			        		</td>
			        		<td>
			        			<a id="popup_bt2" class="btn_dark_grey left" href="">
			        				<span class="btn_dark_grey right">
			        					<span class="btn_dark_grey middle">
			        						Bouton 2			        						
									</span>
			        				</span>
			        			</a>
			        		</td>
			        	</tr>
			        </tbody>
			</table>
 
	        </td>
	        <td class="mid_right"></td>
	      </tr>
	      <tr>
	        <td class="bot_left"></td>
	        <td class="bot_mid"></td>
	        <td class="bot_right"></td>
	      </tr>
	    </tbody>
	  </table>
  </div>
</div>

et au cas où voici le css pour tous les balises <a> par defaut

Code css :

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

a{text-decoration:none;color: #9F9797; -moz-border-radius:0 !important; -webkit-border-radius:0 !important; /*webkit-tap-highlight-color: rgba(255, 255, 255, 0)*/; border-radius:0 !important; outline: none !important; border:none !important;}

[NoSmoking]

ce que je vois, ce sont des href vide, ce qui recharge la page
- <a id="popup_bt1" class="btn_dark_grey left" href=""> et
- <a id="popup_bt2" class="btn_dark_grey left" href="">