AnimationExtender with ModalPopup : The Official Microsoft ASP.NET Forums

Reply

plkilroy

Participant

810 Points

379 Posts

AnimationExtender with ModalPopup

Sep 10, 2008 11:58 AM|LINK

Hi forum, I want to do a fade in when modal popups, so thought to combine animationExtender to the ModalPopup.

Ive tried a few things but its not happening. Ive posted my code with out the animationextender as this is what I need help with. Many Thanks Paul!!!

JS:

modal:

<a id="showModalPopupClientButton" class="nav" href="http://forums.asp.net/AddPost.aspx?ForumID=1022#"><strong> Click Here</strong></a><br />

<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>

<ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
            BehaviorID="programmaticModalPopupBehavior"
            TargetControlID="hiddenTargetControlForModalPopup"
            PopupControlID="Popup"
            BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>

Panel (which I want to fade in):

<asp:Panel runat="server" ID="Popup" Style="display: none; width: 600px; height: 400px; background-color: White;
    border-width: 2px; border-color: #009933; border-style: solid; padding: 10px;">

    <img src="images/block.gif" alt=""/>

            <div class="right">
             -<a id="hideModalPopupViaClientButton" class="nav" href="http://forums.asp.net/AddPost.aspx?ForumID=1022#"> close </a>-
            </div>

</asp:Panel>

Reply

Zhi-Qiang Ni...

All-Star

33491 Points

2952 Posts

Microsoft

Re: AnimationExtender with ModalPopup

Sep 16, 2008 10:21 AM|LINK

Hi,

To achieve your goal, I have built a test application based on your situation, please refer to the code and the comment in it:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestModalAnimationFadeIn.aspx.vb"
    Inherits="SoluTest_AnimationInUserControl.TestModalAnimationFadeIn" %>

<%@ 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></title>

    <script type="text/javascript">

        function pageLoad() {
            $addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);
            $addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);

        }

        function showModalPopupViaClient(ev) {
            ev.preventDefault();
            var modalPopupBehavior = $find('programmaticModalPopupBehavior');
            $find("AEFadeIn").get_OnClickBehavior().play();
            modalPopupBehavior.show();

        }

        function hideModalPopupViaClient(ev) {
            ev.preventDefault();
            var modalPopupBehavior = $find('programmaticModalPopupBehavior');
            modalPopupBehavior.hide();
        }
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <ajaxToolkit:AnimationExtender ID="AEFadeIn" runat="server" Enabled="True" TargetControlID="hfFadeIn">
            <Animations>
                <OnClick>
                    <%-- We need set the AnimationTarget with the control which needs to make animation --%>
                    <Sequence AnimationTarget="Popup">
                        <%--The FadeIn and Display animation.--%>
                        <FadeIn Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
                    </Sequence>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
        <%-- Dummy TargetControl HiddenField--%>
        <asp:HiddenField runat="server" ID="hfFadeIn" />
        <%-- ************** --%>
        <a id="showModalPopupClientButton" class="nav" href="http://forums.asp.net/AddPost.aspx?ForumID=1022#">
            <strong>Click Here</strong></a><br />
        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
        <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup" BehaviorID="programmaticModalPopupBehavior"
            TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="Popup" BackgroundCssClass="modalBackground">
        </ajaxToolkit:ModalPopupExtender>
        <asp:Panel runat="server" ID="Popup" Style="display: none; width: 600px; height: 400px;
            background-color: White; border-width: 2px; border-color: #009933; border-style: solid;
            padding: 10px;">
            <img src="images/block.gif" alt="" />
            <div class="right">
                -<a id="hideModalPopupViaClientButton" class="nav" href="http://forums.asp.net/AddPost.aspx?ForumID=1022#">
                    close </a>-
            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Have my code helped?

Best regards,

Zhi-Qiang Ni

Microsoft Online Community Support

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.

Marked as answer by Zhi-Qiang Ni - MSFT on Sep 16, 2008 11:01 AM

Reply

plkilroy

Participant

810 Points

379 Posts

Re: AnimationExtender with ModalPopup

Sep 21, 2008 08:41 AM|LINK

Thanks Zhi-Qiang Ni, this was exactly the solution!!! adding the hidden button to fire animationExtender when launching the modalPopup, thanks for posting the code it made it easy to uderstendand. Its all good, cheers Paul

Reply

James25

Member

644 Points

1341 Posts

Re: AnimationExtender with ModalPopup

Nov 22, 2009 12:13 AM|LINK

Wow this works really good..How do i do the fade out? I tried onClose inside animation but didnt work. Thankx a lot!

Reply

ozba

Member

2 Points

1 Post

Re: AnimationExtender with ModalPopup

Jul 15, 2010 10:13 AM|LINK

Hi, I have 2 improvment to the answer.

the problem I faced with it (although it's a great solution) is that the Pageload function register the event to a specific control id given its name.

when you use for example master page, or datagrid you don't really know the id, and in datagrid the id's are generated automatically.

so I created these functions:

function show(id) {
            $addHandler($get(id), 'click', showModalPopupViaClient);

        }

        function hide(id) {

            $addHandler($get(id), 'click', hideModalPopupViaClient);
        }

which I call on the onclick event of the controls you want to act upon.

(you could have a global boolean telling you if you already registered the events or not, but thats just sementic).

i also figured out how to fade out, as some one asked for in this thread.

and the complete code is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>


    <script type="text/javascript">


        function show(id) {
            $addHandler($get(id), 'click', showModalPopupViaClient);
            

        }
        

        function hide(id) {
           

            $addHandler($get(id), 'click', hideModalPopupViaClient);
        }
        

        function showModalPopupViaClient(ev) {
            ev.preventDefault();
            var modalPopupBehavior = $find('programmaticModalPopupBehavior');
            $find("AEFadeIn").get_OnClickBehavior().play();
            modalPopupBehavior.show();


        }


        function hideModalPopupViaClient(ev) {
            ev.preventDefault();
            var modalPopupBehavior = $find('programmaticModalPopupBehavior');
            $find("AEFadeOut").get_OnClickBehavior().play();

  
        }

        
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <ajaxToolkit:AnimationExtender ID="AEFadeIn" runat="server" Enabled="True" TargetControlID="hfFadeIn">
            <Animations>
                <OnClick>
                    <%-- We need set the AnimationTarget with the control which needs to make animation --%>
                    <Sequence AnimationTarget="Popup">
                        <%--The FadeIn and Display animation.--%>                     
                        <FadeIn Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
                    </Sequence>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
        
        <ajaxToolkit:AnimationExtender ID="AEFadeOut" runat="server" Enabled="True" TargetControlID="hfFadeIn">
            <Animations>
                <OnClick>
                    <%-- We need set the AnimationTarget with the control which needs to make animation --%>
                    <Sequence AnimationTarget="Popup">
                        <%--The FadeOut and Display animation.--%>                     
                        <FadeOut Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
                    </Sequence>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
        <%-- Dummy TargetControl HiddenField--%>
        <asp:HiddenField runat="server" ID="hfFadeIn" />
        <%-- ************** --%>
        <a id="showModalPopupClientButton" onclick="show(id)" class="nav" href="http://forums.asp.net/AddPost.aspx?ForumID=1022#">
            <strong>Click Here</strong></a><br />
        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
        <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup" BehaviorID="programmaticModalPopupBehavior"
            TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="Popup" BackgroundCssClass="modalBackground">
        </ajaxToolkit:ModalPopupExtender>
        <asp:Panel runat="server" ID="Popup" Style="display: none; width: 600px; height: 400px;
            background-color: White; border-width: 2px; border-color: #009933; border-style: solid;
            padding: 10px;">
            <img src="images/block.gif" alt="" />
            <div class="right">
                -<a id="hideModalPopupViaClientButton"  onclick="hide(id)" class="nav" href="http://forums.asp.net/AddPost.aspx?ForumID=1022#">
                    close </a>-
            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Edited by ozba on Jul 15, 2010 10:26 AM
Edited by ozba on Aug 01, 2010 07:12 AM
Edited by ozba on Aug 01, 2010 07:19 AM

Reply

plkilroy

Participant

810 Points

379 Posts

Re: AnimationExtender with ModalPopup

Jul 31, 2010 09:00 AM|LINK

Thanks Ozba, nice piece of code! and welcome to the Forum, cheers P

Reply

plkilroy

Participant

810 Points

379 Posts

Re: AnimationExtender with ModalPopup

Aug 01, 2010 07:03 AM|LINK

Hi Ive tried implementing Ozba's modal fadein-out code, but its not working in Opera(10.60).

Any Reason?

Reply

flyingbear

Member

30 Points

71 Posts

Re: AnimationExtender with ModalPopup

Jun 21, 2011 07:32 AM|LINK

I tried Ni's solution, it worked when it is a seperated html page. however, if I put it in an aspx page which has a master page, then it shows this error:

Microsoft JScript runtime error: Unable to get value of the property 'get_OnClickBehavior': object is null or undefined

error pops at:

$find("AEFadeIn").get_OnClickBehavior().play();

$find("AEFadeIn") returned null. anyone know how to fix?

the show(id)/hide(id) solution does not work for me.

using IE9 and VS 2010 express.

thanks

Reply

flyingbear

Member

30 Points

71 Posts

Re: AnimationExtender with ModalPopup

Jun 21, 2011 07:46 AM|LINK

it is weird, I added a bahaviorID for the fadeIn animation, then change this:

function showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
//if ($find("AEFadeIn") != null)
{
$find("FadeInBehaviorID").get_OnClickBehavior().play();
modalPopupBehavior.show();
}

}

Then, it works fine. But, why it can find the object based on BehaviorID, but not the ID? anyone knows? thanks

AnimationExtender with ModalPopup RSS

8 replies

plkilroy

AnimationExtender with ModalPopup

Zhi-Qiang Ni...

Re: AnimationExtender with ModalPopup

plkilroy

Re: AnimationExtender with ModalPopup

James25

Re: AnimationExtender with ModalPopup

ozba

Re: AnimationExtender with ModalPopup

plkilroy

Re: AnimationExtender with ModalPopup

plkilroy

Re: AnimationExtender with ModalPopup

flyingbear

Re: AnimationExtender with ModalPopup

flyingbear

Re: AnimationExtender with ModalPopup

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft