Messieurs Dames, bonjour.

Je suis en train de développer une appli web qui utilise pas mal de popups de confirmation sous forme de calques personnalisables.

Mon souci : ces calques fonctionnent très bien sous IE et FF.
Mais sous Chrome, pas mal de soucis :
  • le positionnement est complètement différent
  • les boutons présents sur le calque sont accessibles (à la souris, on voit bien que l'on clique dessus) mais ne déclenchent pas les événements liés.


J'ai l'impression que c'est un souci de style (parce que je fais progresser la chose en modifiant le CSS), mais mes connaissances étant limités et mes recherches vaines, je ne m'en sort pas.

Quelqu'un aurait-il une idée ?

Merci d'avance.

Exemple de comportement (normal) sous FF :


Exemple de comportement (foireux) sous Chrome :


Un bout de code pour comprendre le fonctionnement :

Le contrôle utilisateur comportant un autre UC avec une barre d'actions en bas de page :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
        <tr id="lig4" runat="server">
            <td id="cell4" class ="lignePiedDePage" runat="server">
                <uc:UCActionsTables ID="pdaActions" runat="server"
                    OnQuitterClick="Quitter_Click"
                    OnRafraichirClick="Rafraichir_Click"
                    OnAdministrationClick="Administration_Click"
                />
            </td>
        </tr>
    </table>
</div>
La gestion de la barre d'actions :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
<asp:UpdatePanel runat="server" ID="upChoix" UpdateMode="Conditional">
    <ContentTemplate>
        <uc:UCChoix ID="popupChoix" runat="server" Visible="false" OnChoixOui="Quitter_Oui"/>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="lkQuitter" EventName="Click"/>
    </Triggers>
</asp:UpdatePanel>
Le contrôle utilisateur de choix :

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
 
<%--Le gestionnaire de popup--%>
<ajaxtoolkit:ModalPopupExtender runat="server" ID="mpePopup" BackgroundCssClass="cache"
    PopupControlID="panChoix" 
    TargetControlID="btnShowPopup" />
 
<%--Le contenu du popup--%>
<asp:Panel runat="server" id="panChoix" class="choix">
    <table id="tableChoix" class="popupLigne popupLignePetite">
        <tbody id="bdChoix" class="popupLigne popupLignePetite"  >
        <tr id="col0" class="popupLigne popupLignePetite">
            <td colspan="2" id="lig0" class="popupLigne">
            <%--Le libellé proposant le choix--%>
                <asp:Label runat="server" ID ="lbChoix" CssClass="popupTitre" ></asp:Label>
            </td>
        </tr>
        <tr id="col2" class="popupLigne popupLignePetite">
        <%--Les boutons de choix--%>
            <td id ="lig1" class="popupLigne popupLigneBouton">
                <asp:Button runat="server" ID="btOui" CssClass="choixBouton" OnClick="Oui_Click" ></asp:Button>
            </td>
            <td id ="lig2" class="popupLigne popupLigneBouton">
                <asp:Button runat="server" ID="btNon" CssClass="choixBouton" OnClick="Non_Click"></asp:Button>
            </td>   
        </tr>
        </tbody>    
    </table>
</asp:Panel>
Des bouts de style :

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
 
.cache{
	margin: 0 auto;
	background-color: #C0C0C0;
	filter: alpha(opacity=70); 
	opacity: 0.7;
	width: 100%;
	height: 100%;
	position: fixed!important;
	top:0;
	left:O;
	z-index: 2;
}
.clear{
	clear: both;
	display: block;
}
.premierplan{
	float: left;
	position: relative;
	width: 90%;
	min-width: 100px;
	z-index: 3;
	top: 150px;
	left: 60px;
}