AjaxToolKit ModalPopupExtender + AnimationExtender

Question

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?

Answer 1

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();
    }
});

Answer 2

Hi

I am also looking for solution for same problem. Can you please provide the solution ?

Regards Ninad