Search code examples
asp.net-2.0modalpopupextenderanimationextender

AjaxToolKit ModalPopupExtender + AnimationExtender


I am developing a site using ASP.NET 2.0.

AjaxToolKit's ModalPopupExtender is being used to show a popup containing news items while the user is waiting to be redirected to a page (that page takes some time to load).

Right now, I am using a button's OnClientClick property to show the modal popup using its show() method. So, the popup gets shown, and the redirection starts.

I want to show the popup with some animation - like fading in or coming in from the top, etc. I took a look at the AnimationExtender control, but it seems like it doesn't provide any method to do something like that. Does it?


Solution

  • Ok Guys! I finally found out a solution for this. I used the awesome jsTween library for the animation effect. I also used the shown event of the ModalPopupExtender control to re-position the popup on top after pushing its original position to a variable.

    EDIT

    $find("ModalPopupExtender").add_shown(function(sender, args) {
            var el = sender.get_element();
            var top = parseFloat(el.style.top);
    
            var tween = new Tween(document.getElementById("PopupPanelID").style, 'top', Tween.elasticRegularEaseInOut, -300, top, 2, 'px');
            tween.start();
        }
    });