problème avec ajax modal popup extender

Question

Je suis confronté à un problème lors de l'affichage de deux popups modaux. Le scénario se déroule comme suit:

J'ai affiché un pop-up modal sur le bouton click.J'ai un autre bouton dans ce popup modal. Lorsque je clique sur ce bouton, j'affiche une autre fenêtre contextuelle modale. Maintenant, le problème est que, quand je afficher le deuxième popup, le premier popup est encore clikable. Que dois-je faire pour que l'utilisateur ne puisse pas cliquer sur le premier popup.

Toute aide serait grandement appréciée

Merci!

Answer 1

en supposant que cela a quelque chose à voir avec le langage HTML:

mis la zindex de la deuxième popup en plus alors la première

1er pop-up:

position:relative; 
z-index:1; 

2ème pop-up:

position:relative; 
z-index:2; 

Answer 2

Je me suis heurté à cela avant ... il y avait une certaine bizarrerie concernant l'endroit où vous avez placé vos extensions dans Relation à leurs panneaux. Je ne me souviens plus précisément de la version qui a fini par fonctionner, mais vous pouvez jouer avec les combinaisons suivantes.

par exemple.

<!-- 2 Seperate Panels & Extenders --> 
<ajt:ModalPopupExtender ID="mpe1" TargetControlID="pnl1" /> 
<asp:Panel ID="pnl1"> 
    <asp:Button ID="btn1" /> <!-- launches pnl2 popup --> 
</asp:Panel> 

<ajt:ModalPopupExtender ID="mpe2" TargetControlID="pnl2" /> 
<asp:Panel ID="pnl2"> 
    Content 
</asp:Panel> 

Vs.

<!-- 2 Nested Panels & But separate Extenders --> 
<ajt:ModalPopupExtender ID="mpe1" TargetControlID="pnl1" /> 
<asp:Panel ID="pnl1"> 
    <asp:Button ID="btn1" /> <!-- launches pnl2 popup --> 
    <asp:Panel ID="pnl2"> 
     Content 
    </asp:Panel> 
</asp:Panel> 
<ajt:ModalPopupExtender ID="mpe2" TargetControlID="pnl2" /> 

Vs.

<!-- 2 Fully Nested Panels & Extenders --> 
<ajt:ModalPopupExtender ID="mpe1" TargetControlID="pnl1" /> 
<asp:Panel ID="pnl1"> 
    <asp:Button ID="btn1" /> <!-- launches pnl2 popup --> 
    <ajt:ModalPopupExtender ID="mpe2" TargetControlID="pnl2" /> 
    <asp:Panel ID="pnl2"> 
     Content 
    </asp:Panel> 
</asp:Panel> 

Answer 3

Vous pouvez définir un CssClass de fond qui grays sur la page ou vous pouvez capturer le clic dans votre code derrière et lui dire de se cacher la fenêtre précédente en appelant la méthode externer.hide() et qui donnera vous ce que vous cherchez.

Answer 4

J'ai rencontré des problèmes similaires. Plutôt que d'avoir 2 popups modaux, placez un panneau avec les deux panneaux à l'intérieur. Le panneau parent obtient l'extension contextuelle modale, tandis que les deux internes sont masqués/affichés en fonction du bouton sur lequel vous cliquez. En fonction des styles appliqués aux modaux, l'application d'un z-index en CSS fonctionnera, cependant, j'ai couru dans l'autre modal qui brille.

Un exemple de code rapide du panneau avec deux enfants seraient:

<asp:Panel id="pnlParent" runat="server"> 
<asp:panel id="pnlChild1" runat="server" visible="false"> 
... controls ... 
</asp:Panel> 
<asp:Panel id="pnlChild2" runat="server" visible="false"> 
</asp:panel> 
<asp:ModalPopupExtender id="mpePnlParent" runat="server" ...other attributes .../> 

Maintenant, sur le premier bouton clic, définir la visibilité de pnlchild1 true. L'événement onclick du bouton pnlChild1 définit la visibilité de pnlChild1 sur false, la visibilité de pnlChild2 sur true. Enfin, sur l'action accomplissant le deuxième panneau enfant, masquer les deux panneaux enfants et masquer le modalpopup avec la méthode .Hide() du panneau.

Voici un peu de CSS pour essayer le menu contextuel modal gris sur l'arrière-plan de l'écran principal, et « highlight » le contenu modal

.modalBackground 
{ 
    background-color: #000011; 
    -moz-opacity: .60; 
    filter: alpha(opacity=60); 
    opacity: .60; 
} 
.modalPopup 
{ 
    padding: 5px; 
    border: 5px outset #00F; 
    background-color: #FFF; 
    width: 640px; 
} 

Le CSS ci-dessus est multi navigateur sûr.

Bonne chance