Problem with ajax modal popup extender

Question

Hi,

I am facing a problem while displaying two modal popups. Scenario goes like this:

I display one modal popup on the button click.I have another button inside this modal popup. When I click on this button, I display another modal popup. Now the problem is that, when I display the second popup, the first popup is still clikable. What should I do so that user cannot click the first popup.

Any help would be highly appreciated

Thanks

Arun

Answer 1

assuming this has something to do with html:

set the zindex of the second popup to be higher then the first

1st popup:

position:relative;
z-index:1;

2nd popup:

position:relative;
z-index:2;

Answer 2

I ran into this before... there was some quirk regarding where you placed your Extenders in Relation to their Panels. I can't remember specifically which version ended up working, but you could play around with the following combinations.

e.g.

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

You can either set a background CssClass that greys out the page or you can capture the click in your code behind and tell it to hide the previous popup by calling the externer.hide() method and that will give you what you are looking for.

Answer 4

Content

This method gives the answer...