jquery asp.net bootstrap alert auto close

3pvhb19x  于 2023-06-29  发布在  jQuery
关注(0)|答案(3)|浏览(120)

我在我的.aspx网页表单页面上有这个面板,用于在按钮回发事件后显示消息(成功,失败,异常等)。我还在这个页面上包含了一些Jquery库。

<asp:Panel ID="InfoPanel" runat="server" class="alert alert-success alert-dismissable" Visible="False">
     <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
     <i class="fa-lg fa fa-bullhorn"></i>
     <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
 </asp:Panel>

它看起来像这样:(lblMessage将在代码隐藏处显示文本)

我如何使它在5秒后自动关闭,我对JS和jQuery一无所知,但如果你告诉我它是如何工作的,我可以将其应用到我的程序中(哈哈)注:我在这里看到了这个问题:Bootstrap Alert Auto Close选择的答案是:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

但我很困惑,我如何让它工作?

omhiaaxx

omhiaaxx1#

$("#success-alert")是一个选择器。您正在选择将对页面的哪个部分执行以下操作。在本例中,它查找success-alertid的元素。
页面中asp控件的ID是自动生成的,但可以通过controls .ClientId属性访问。
因此,您需要执行该JavaScript,但将success-alert替换为InfoPanel控件的客户端id。
默认情况下,JavaScript在页面加载后立即执行(有一些方法可以延迟它)。在您的例子中,最简单的方法是在包含消息的响应中包含一个<script>块。
作为参考,fadeTo documentation值得一读。传入的参数是延迟(在您的示例中为2000毫秒)和不透明度(应该是0-1)。在它淡出之后,它会在500毫秒的时间内向上滑动(想想一个闭合的 accordion )。
最后的function() {}是一个匿名函数,在动画完成后调用。就像一个lambda。你可以选择使用它来做你需要的任何其他整理,但它不应该是必需的。
它已经相当一段时间,因为我做了webforms,但我认为你想这样的东西在年底您的信息框

<script type="text/javascript">
    $("#<%=InfoPanel.ClientID%>").delay(5000).fadeTo(500, 0);
</script>

例如等待5秒,然后在1/2秒内淡出

pexxcrt2

pexxcrt22#

我找到了这个,它工作:http://www.queryadmin.com/997/automatically-close-twitter-bootstrap-alert-message/
5秒后自动关闭(淡出)警报消息:

<script type="text/javascript">

$(document).ready(function () {

    window.setTimeout(function () {
        $(".alert").fadeTo(1500, 0).slideUp(500, function () {
            $(this).remove();
        });
    }, 5000);
     
});

</script>

消息下方的内容将向上滑动到其原始位置。
以下是用于显示消息的HTML代码:

<div class="alert alert-danger">
    This is an example message...
</div>

更多信息:window.setTimeout(function, delay)
结果如下所示:

thtygnil

thtygnil3#

你可以设置一个定时器,5秒后淡出。
就像

setTimeout(function () {
     $("#success-alert").fadeOut(100, null);                            
}, 5000);

相关问题