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