Problem mit AJAX Modal Popup Extender

Question

Ich habe ein Problem beim Anzeigen von zwei modalen Popups. Szenario geht so:

Ich zeige ein modales Popup auf dem Knopf klicken an. Ich habe einen anderen Knopf innerhalb dieses modalen Popups. Wenn ich auf diese Schaltfläche klicke, zeige ich ein anderes modales Popup an. Nun das Problem ist, dass, wenn ich das zweite Popup anzeigen, das erste Popup immer noch klickbar ist. Was soll ich tun, damit der Benutzer nicht auf das erste Popup klicken kann?

Jede Hilfe würde sehr geschätzt

Vielen Dank!

Answer 1

davon aus, das etwas mit HTML zu tun hat:

die zindex des zweiten Popup höher eingestellt als die erste

1.: Pop-up

position:relative; 
z-index:1; 

2.: Pop-up

position:relative; 
z-index:2; 

Answer 2

Ich bin schon mal darüber gestolpert ... da gab es ein bisschen komisch, wo du deine Extender hingelegt hast Beziehung zu ihren Panels. Ich kann mich nicht erinnern, welche Version am Ende funktioniert hat, aber Sie könnten mit den folgenden Kombinationen spielen.

z.B.

<!-- 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

Sie können entweder einen Hintergrund CssClass gesetzt, die abgeblendet der Seite oder Sie klicken in Ihrem Code aufnehmen kann hinter und sagen, dass es die vorherige Popup zu verbergen, indem die externer.hide() -Methode aufrufen und das gibt Sie, was Sie suchen.

Answer 4

Ich bin auf ähnliche Probleme gestoßen. Anstatt zwei modale Popups zu verwenden, platzieren Sie ein Panel mit den zwei Panels darin. Das übergeordnete Panel erhält den modalen Popup-Extender, während die beiden inneren basierend auf dem Klick auf die Schaltfläche ausgeblendet/angezeigt werden. Abhängig von den Stilen, die auf die Modale angewendet werden, funktioniert das Anwenden eines Z-Indexes in CSS, jedoch habe ich das andere Modal durchscheinen sehen.

Ein kurzes Codebeispiel der Tafel mit zwei Kindern wäre:

<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 .../> 

nun auf der ersten Schaltfläche klicken, stellen Sie die Sichtbarkeit von pnlchild1 auf true. Das Ereignis onclick der Schaltfläche pnlChild1 setzt die Sichtbarkeit von pnlChild1 auf false und die Sichtbarkeit von pnlChild2 auf true.

Schließlich, auf was auch immer Aktion das zweite Kind-Panel beendet, ausblenden Sie beide Kinder-Panels und verstecken Sie das Modalpopup mit der .Hide() -Methode des Panels.

Hier einige CSS auf den Modal Popup zu versuchen, den Hauptbildschirm Hintergrund grau aus, und „Highlight“ der modalen Inhalt

.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; 
} 

Die obige CSS ist Cross-Browser sicher.

Viel Glück