AnimationExtender with ModalPopup

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>

Re: AnimationExtender with ModalPopup

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

Re: AnimationExtender with ModalPopup

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

Re: AnimationExtender with ModalPopup

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

Re: AnimationExtender with ModalPopup

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>

Re: AnimationExtender with ModalPopup

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

Re: AnimationExtender with ModalPopup

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

Any Reason?

Re: AnimationExtender with ModalPopup

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

Re: AnimationExtender with ModalPopup

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