Is it possible to fade in the popup background then display the popup once fade completes?
Similar but not exactly what you need. I know how to fade in a modal with
JQuery using javascript. I have a little trouble with the fonts so you need to have the exact font size specified in your css.
keyoke
Member
72 Points
25 Posts
ModalPopupExtender Background fade animation
Apr 02, 2009 10:31 AM|LINK
Hi,
Is it possible to fade in the popup background then display the popup once fade completes?
Cheers
Danny117
Star
11160 Points
1932 Posts
Re: ModalPopupExtender Background fade animation
Apr 02, 2009 03:23 PM|LINK
Similar but not exactly what you need. I know how to fade in a modal with JQuery using javascript. I have a little trouble with the fonts so you need to have the exact font size specified in your css.
//first fade the modal to 0
$($get("mymodalpanel").fadeTo(0,0);
//then show the modal
$find("mymodalbehaviorid").show();
//then fade in the modal.
$($get("mymodalpanel")).fadeTo(0, .21).fadeTo(645, 1);
I have a live demo on my blog (click one of the comment links)
gosylvester.com
Me on linked in
Vince Xu - M...
All-Star
80367 Points
6801 Posts
Re: ModalPopupExtender Background fade animation
Apr 06, 2009 05:59 AM|LINK
Hi,
Do you want to achieve the background fading in?
Please try the below code:
<head runat="server"> <title>Untitled Page</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=0); opacity:0; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style> </head> <body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" /> <script type="text/javascript"> function showPopup() { var modalPopupBehavior = $find('programmaticModalPopupBehavior'); modalPopupBehavior.show(); dropFadeIn_IE(); } function dropFadeIn_IE() { var obj= $find('programmaticModalPopupBehavior')._backgroundElement; if(obj.filters.alpha.opacity<80) // In Firefox: if(obj.style.opacity<0.8) { obj.filters.alpha.opacity += 5;// In Firefox: obj.style.opacity =new Number(obj.style.opacity) + 0.1; fadeTimer1=setTimeout("dropFadeIn_IE()",100); } else { clearTimeout(fadeTimer1); } } function hidepopup() { var modalPopupBehavior = $find('programmaticModalPopupBehavior'); modalPopupBehavior.hide(); var obj= $find('programmaticModalPopupBehavior')._backgroundElement; obj.filters.alpha.opacity=0;//obj.style.opacity=0; } input id="Button2" type="button" value="button" onclick="showPopup()"/> <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/> <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup" BehaviorID="programmaticModalPopupBehavior" TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="programmaticPopup" BackgroundCssClass="modalBackground" DropShadow="True" RepositionMode="RepositionOnWindowScroll" > </ajaxToolkit:ModalPopupExtender> <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:125px;width:225px;padding:10px"> text <input id="Button1" type="button" value="OK" onclick="hidepopup()" /> </asp:Panel> </form> </body>NeCroFire
Member
17 Points
63 Posts
Re: ModalPopupExtender Background fade animation
Jul 16, 2009 01:21 PM|LINK
Hi.
I keep getting a 'Object Expected' error when I try this:
$($get("mymodalpanel")).fadeTo(0,0);
So then I took that out and only tried this:
$find("mymodalbehaviorid").show();
This works, but I still get the same error msg on that line when I run the app through IE.
I have the same bit of code on older site to show my modalpopup and it works fine there, but I that site does not ude jQuery.
What am I missing?? Thanks