Hi all. I'm taking my first baby steps into using AJAX and I am having a few difficulties with the ModalPopup.
I placed it in a testpage and it worked fine. The animation was a bit screwy but I've decided to ditch animation for now.
Now I am trying to place it in a page of my site and rather than appearing on top of the page content, it is appearing above it and is pushing it down.
I am calling the Popup from the code behind as a number of operations need to be carried out on page load to determine whether or not it should be shown.
Here is the full .aspx code for the ModalPopup. Page content has been stripped out to save space. If anyone wants to see that I can post it on request.
<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" CodeFile="Reports.aspx.vb" Inherits="Default1"%><%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Report Centre</title> <link type="text/css" rel="stylesheet" href="StyleSheet.css" /> <link type="text/css" rel="stylesheet" href="style.css" /></head><body style="text-align: center;"> <form id="form1" runat="server"><div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Button ID="btnAnimateTriggerOne" runat="server" Text="Button" OnClientClick="return false;" Visible="False" /><ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnAnimateTriggerOne" PopupControlID="PnlAnimated" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="hlClose" CancelControlID="hlClose" PopupDragHandleControlID="pnlTitle" /> <asp:Panel ID="PnlAnimated" runat="server" Height="100px" Width="372px" style="background-color:white; border: 1px solid #7da8c8 " Visible="False"> <asp:Panel ID="pnlTitle" runat="server" Height="24px" Width="99.5%" style="border: 1px solid white; background-color: #7da8c8"> <table style="width:100%; border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px;"> <tr> <td style="width: 50%; text-align: left; vertical-align: middle">Tutor Options</td> <td style="width: 50%; text-align: right; vertical-align: middle"><asp:HyperLink ID="hlClose" runat="server" navigateurl="return false;">Close</asp:HyperLink></td> </tr> </table> </asp:Panel> <asp:Label ID="lblTutorName" runat="server" Style="margin-left: 5%" Text="Welcome back "></asp:Label><br /> <asp:Label ID="lblStrangers" runat="server" Style="margin-left: 5%" Text="Strangers on your registers (0)"></asp:Label><br /> </asp:Panel> <div style="width: 386px; height: 18px; position: fixed; left: 1px; text-align: left"> <asp:Label ID="lblUsername" runat="server" Text="Label"></asp:Label> <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink> </div>//Page content goes here. Just a load of tables and server controls.</div></form></body></html>
and here is the code behind
'check if querystring is null or empty. Exit sub is true, retrieve if false. If String.IsNullOrEmpty(Request.QueryString("tut")) = True Then vTutID = "R787" Else vTutID = Strings.Replace(Request.QueryString("tut"), "'", "''") End If If Queries.StaffIsTutor(vTutID) = True Then vTutName = Queries.StaffNameFromID(vTutID) vStrangers = Queries.CountStrangersByStaff(vTutID) If vStrangers = 0 Then Else lblTutorName.Text &= vTutName lblStrangers.Text = "Strangers on your registers: " & vStrangers PnlAnimated.Visible = True MPE.Show() End If
Again, I've stripped out the rest of the code behind as IE was seriously lagging when I copied and pasted the whole lot. I will post this on request if no one can see the problem from what I have posted.
I have a feeling the problem is something to do with <div> tags as I have read these can effect some AJAX controls, but I've tried various configurations of DIV tags with no effect.
Hello,
I amde some changes to your page and it works fine. Iremoved visible = false on the server controls. When you do this, the controls are not drawn and no space is reserved for them at page load. Consider adding a style display:none if you do not want to see them at page load.
I also removed the positioning 'fixed' for the bottom div.
When I click the button the mpe shows in the center of the page. I also added my own css for the background.
Give it a try.
-Louis
.modalBackground {background-color:Gray;filter:alpha(opacity=70);opacity:0.7;}
.modalPopup {background-color:#ffffdd;border-width:1px;border-style:solid;border-color:black;padding:0px;text-align :center ; }
<cc1:ModalPopupExtenderID="MPE"runat="server"
TargetControlID="btnAnimateTriggerOne"
PopupControlID="PnlAnimated"
BackgroundCssClass="modalBackground"DropShadow="false"
OkControlID="hlClose"CancelControlID="hlClose"
PopupDragHandleControlID="pnlTitle"/>
<asp:PanelID="PnlAnimated"runat="server"Height="100px"Width="372px"style="background-color:white; border: 1px solid #7da8c8 ">
<asp:PanelID="pnlTitle"runat="server"Height="24px"Width="99.5%"style="border: 1px solid white; background-color: #7da8c8">
<tablestyle="width:100%; border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px;">
<tr>
<tdstyle="width: 50%; text-align: left; vertical-align: middle">Tutor Options</td>
<tdstyle="width: 50%; text-align: right; vertical-align: middle"><asp:HyperLinkID="hlClose"runat="server"navigateurl="return false;">Close</asp:HyperLink></td>
</tr>
</table>
</asp:Panel>
<asp:LabelID="lblTutorName"runat="server"Style="margin-left: 5%"Text="Welcome back "></asp:Label><br/>
<asp:LabelID="lblStrangers"runat="server"Style="margin-left: 5%"Text="Strangers on your registers (0)"></asp:Label><br/>
</asp:Panel>
<divstyle="width: 386px; height: 18px; text-align: left">
<asp:LabelID="lblUsername"runat="server"Text="Label"></asp:Label>
<asp:HyperLinkID="HyperLink1"runat="server">HyperLink</asp:HyperLink>
</div>
//Page content goes here. Just a load of tables and server controls.
</div>
I've made the changes you suggested and that has sorted that out.
The only problem I have now is that the panel controls flash up in the page content momentarily as the page loads before they are shown as the Modal Popup. I've read that you can prevent this by setting the height and width to 0 and then changing this with a startup animation. I tried this previously on my test but could not get the animation to work.
All I'm after in terms of an animation is to have it drop down from the top of the page to the middle or some sort of expanding animation. If its easier, it can just appear, but I tried all of these methods and more and it just didn't work. Unfortunately I deleted the animation code in frustration so are there any good sites that offer example of various animation code. I had a look at ajax.asp.net but it didn't make much sense to me tbh.
I don't wish to take the michael but if you could help me with this too, even by just providing a link to the solution, I would be extremely grateful.
To stop the flashing, try setting the style display:none on the panel.
That worked fine, can't believe I overlooked the display property!
Thanks for your help louisdegrazia. You have been marked as Answer x2.
Glad to help! I like to formatting on your popup!
No comments:
Post a Comment