ASP.NET 中的淡入和淡出

发布于 2024-11-10 03:28:52 字数 2082 浏览 4 评论 0原文

嗨，我有一个弹出窗口，出现时淡入，关闭时淡出。问题是淡出动画何时也会进行回发，我不希望这样，我希望它像模型弹出窗口中的属性 CancelControlID 一样工作。

注意

我无法将属性CancelControlID设置为关闭按钮，因为这样就不会执行动画

查看代码

按钮

<asp:Button ID="btnNewPopUp" CssClass="btnNewPopUp" runat="server" Text="Crear Capas"/>
            <asp:ModalPopupExtender BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnOk" runat="server" PopupControlID="pnlPopUpSetLayers" id="mdlPopUp" TargetControlID="btnNewPopUp" >
            </asp:ModalPopupExtender>

面板

<asp:Panel ID="pnlPopUpSetLayers" runat="server" CssClass="popUp" > 
    <table id="tbl" class="tableFinder">
        <tr>
            <td colspan="2">
                <div class="header1">Crear capas</div>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblLayerName" CssClass="formatText" runat="server" Text="Nombre de la Capa"></asp:Label>
            </td>
            <td>
            </td>
        </tr>
    </table>
    <asp:Button ID="btnOk" runat="server" Text="Ok" /> 
    <asp:Button ID="btnClose" runat="server" Text="Close Me" /> 
</asp:Panel>

动画

<asp:AnimationExtender id="MyExtender" runat="server" TargetControlID="btnNewPopUp">
    <Animations>
        <OnClick>
            <FadeIn AnimationTarget="pnlPopUpSetLayers" Duration=".5" Fps="20" />
        </OnClick>
    </Animations>
</asp:AnimationExtender>

<asp:AnimationExtender id="AnimationExtender1" runat="server" TargetControlID="btnClose">
    <Animations>
        <OnClick>
            <FadeOut AnimationTarget="pnlPopUpSetLayers" Duration=".5" Fps="20" />
        </OnClick>
    </Animations>
</asp:AnimationExtender>

原文

Hi i'm hive a popup that appear's with fade In and close with fadeout. The problem it's when do the fadeout animation also makes a post back i don't want that, i want that works like the property CancelControlID in the model popUp.

note

i can't set the property CancelControlID to the close button because then doesn't do the animation

see the code

the Button

<asp:Button ID="btnNewPopUp" CssClass="btnNewPopUp" runat="server" Text="Crear Capas"/>
            <asp:ModalPopupExtender BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnOk" runat="server" PopupControlID="pnlPopUpSetLayers" id="mdlPopUp" TargetControlID="btnNewPopUp" >
            </asp:ModalPopupExtender>

the Panel

<asp:Panel ID="pnlPopUpSetLayers" runat="server" CssClass="popUp" > 
    <table id="tbl" class="tableFinder">
        <tr>
            <td colspan="2">
                <div class="header1">Crear capas</div>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblLayerName" CssClass="formatText" runat="server" Text="Nombre de la Capa"></asp:Label>
            </td>
            <td>
            </td>
        </tr>
    </table>
    <asp:Button ID="btnOk" runat="server" Text="Ok" /> 
    <asp:Button ID="btnClose" runat="server" Text="Close Me" /> 
</asp:Panel>

the animations

<asp:AnimationExtender id="MyExtender" runat="server" TargetControlID="btnNewPopUp">
    <Animations>
        <OnClick>
            <FadeIn AnimationTarget="pnlPopUpSetLayers" Duration=".5" Fps="20" />
        </OnClick>
    </Animations>
</asp:AnimationExtender>

<asp:AnimationExtender id="AnimationExtender1" runat="server" TargetControlID="btnClose">
    <Animations>
        <OnClick>
            <FadeOut AnimationTarget="pnlPopUpSetLayers" Duration=".5" Fps="20" />
        </OnClick>
    </Animations>
</asp:AnimationExtender>

分享到QQ

分享到微博

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

发布评论

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

紫南 2024-11-17 03:28:53

我个人讨厌动画扩展器...你考虑过改用 jQuery 吗？如果是这样，JavaScript 将像这样简单：

jQuery('#<%=pnlPopUpSetLayers.ClientID %>').fadeIn();
jQuery('#<%=pnlPopUpSetLayers.ClientID %>').fadeOut();

I personally hate the animation extenders...have you thought about changing to jQuery? If so, the JavaScript would be as easy as this:

jQuery('#<%=pnlPopUpSetLayers.ClientID %>').fadeIn();
jQuery('#<%=pnlPopUpSetLayers.ClientID %>').fadeOut();

回复收藏 0 原文

一个人的夜不怕黑 2024-11-17 03:28:53

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">
    .panel{display: none;}
</style>
<script type="text/javascript">
    $(function () {
        $('#btnShowPanel').click(function (e) {
            e.preventDefault();
            $('#pnlHelloWorld').fadeIn('slow');
        });

        $('#btnClose').click(function (e) {
            e.preventDefault();
            $('#pnlHelloWorld').fadeOut('slow');
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:Button ID="btnShowPanel" Text="Show" runat="server" />

    <asp:Panel ID="pnlHelloWorld" CssClass="panel" runat="server">
        Hello World!<br />

        <asp:Button ID="btnClose" Text="Close" runat="server" />
    </asp:Panel>
</div>
</form>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">
    .panel{display: none;}
</style>
<script type="text/javascript">
    $(function () {
        $('#btnShowPanel').click(function (e) {
            e.preventDefault();
            $('#pnlHelloWorld').fadeIn('slow');
        });

        $('#btnClose').click(function (e) {
            e.preventDefault();
            $('#pnlHelloWorld').fadeOut('slow');
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:Button ID="btnShowPanel" Text="Show" runat="server" />

    <asp:Panel ID="pnlHelloWorld" CssClass="panel" runat="server">
        Hello World!<br />

        <asp:Button ID="btnClose" Text="Close" runat="server" />
    </asp:Panel>
</div>
</form>

回复收藏 0 原文

~没有更多了~