Geeks With Blogs
Jenson Code Ranch Code Ranch for Web and Mobile Development

Recently, when I'm working on a ModalPopUp for my own custom alert with ModalPopUpExtender, I encountered an issue which myself can't explain.

   

Here is what I did:

   

First, I design a panel (pnlPopUp) with a title and message body labels, and then an OK button to close the pop up message.

   

<asp:Panel ID="pnlPopUp" runat="server" BackColor="#FFFFCC" BorderStyle="Solid"

BorderWidth="1px" CssClass="panel" Height="150px"

style="position:absolute; top: 407px; left: 478px;" Width="300px">

<table class="style12" style="width: 100%; height: 100%">

<tr>

<td align="center" class="headerTD" colspan="3">

<asp:Label ID="lblTitle" runat="server" CssClass="PageDispText" Text="Title"></asp:Label>

</td>

</tr>

<tr>

<td class="style21">

</td>

<td class="style22">

<asp:Label ID="lblMessage" runat="server" CssClass="label" Height="100%"

Text="No Message Here" Width="100%"></asp:Label>

</td>

<td class="style22">

</td>

</tr>

<tr>

<td class="style17">

&nbsp;</td>

<td align="center" class="style20">

<asp:Button ID="btnOk" runat="server" CssClass="Button" Text="OK"

Width="50px" />

</td>

<td>

&nbsp;</td>

</tr>

</table>

</asp:Panel>

   

   

Second, I drop a button to trigger the Popup for testing. So I just name it btnPopUp.

   

<asp:Button ID="btnPopUp" runat="server" Text="Show Pop-up" />

   

Next, I drop a ModalPopUpExtender, which I configure it to pop up my pnlPopup when I click on btnPopup. And you know what? It doesn't work. So I'm quite puzzled why is it behaving so.

   

I googled this until I come to conclusion, there's no people facing the same problem. Just before I gave up, I found 1 person facing the same issue, people mentioned about ScriptManger. But well, I did have a ScriptManager, and it's placed in my Master Page, thus, I think there shouldn't be any issue since my Default will use the ScriptManager from Master Page.

   

So, with it still not working (which means, nothing was shown when I clicked on the btnPopUp), I try to change the Popup object to btnPopup and the control to pnlPopup, and you know what happens? It works! So I'm quite frustrated how would this happen?

   

And I went on to replace btnPopUp with a hyperlink control, so the target pop up object is now set back to pnlPopUp, but the control that trigger the pop up would now be a hyperlink instead. And to my surprise, it also works!

   

<asp:HyperLink ID="HyperLink1" runat="server" CssClass="label">Show Pop Up</asp:HyperLink>

   

I really don't understand why is it behaving so weird. Since my Master Page is doing nothing with the Script Manager, so I've decided to remove it, then I will manually add a new ScriptManager for Default.aspx. Now, I tried to set back the PopupControlID to pnlPopUp, and the TargetControlID to btnPopUp, and setup the other properties in the ModalPopUpExtender, and finally it's working perfectly! Of course, you might want to set the background alpha to around 50-70% to create an effect to inform users that the pop-up lockout the background until you get rid of this pop-up alert by clicking on the "Ok" button.

   

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnPopUp"

PopupControlID="pnlPopUp" OkControlID="btnOk"

BackgroundCssClass="modalBackgroundCSS" >

</asp:ModalPopupExtender>

   

   

You can make use of the BackGrondCssClass to achieve this. Properties you might want to set for the modalPopUp would be:

   

background-color:#fff; /** or #ffffff or any other color you like */

filter:alpha(opacity=60);

opacity:0.6px;

   

 Modal Pop-up Sample

   

Good luck experimenting with ModalPopupExtender and have fun!

Posted on Monday, June 13, 2011 1:05 PM | Back to top


Comments on this post: Having Problem with AJAX ModalPopUpExtender?

# re: Having Problem with AJAX ModalPopUpExtender?
Requesting Gravatar...
hey i have same problem. i am using two modularpopup one from gridview and another from the page itself. i found the problem but can't solve it.Here is the problem as i use button outside of grid view to trigger same popup both popup works and when i try with grid view both popup are not triggered.
I think my button is not responding when i use gridview button so any solution.
Left by Dipen on Nov 08, 2012 1:13 PM

Your comment:
 (will show your gravatar)


Copyright © Jenson | Powered by: GeeksWithBlogs.net