AjaxToolKit ModalPopupExtender +动画扩展器

发布于 2024-08-15 21:04:24 字数 311 浏览 10 评论 0原文

我正在使用 ASP.NET 2.0 开发一个网站。

AjaxToolKit 的 ModalPopupExtender 用于在用户等待重定向到某个页面(该页面需要一些时间来加载)时显示包含新闻项的弹出窗口。

现在,我正在使用按钮的 OnClientClick 属性,通过其 show() 方法显示模式弹出窗口。因此,将显示弹出窗口,并且重定向开始。

我想用一些动画来显示弹出窗口 - 比如淡入或从顶部进入等。我查看了 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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

橘香 2024-08-22 21:04:24

好的,伙计们!我终于找到了解决这个问题的办法。我使用了很棒的 jsTween 库来实现动画效果。我还使用 ModalPopupExtender 控件的 shown 事件在将弹出窗口的原始位置推送到变量后将其重新定位在顶部。

编辑

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

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();
    }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文