asp.net bootstrap警报自动关闭

Question

我在.aspx webform页面上有这个面板，用于在按钮回发事件后显示消息（成功，失败，异常等）。 我也在这个页面上包含了一些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将在代码隐藏处显示文本）

我如何让它在5s后自动关闭，我对JS和jQuery没有任何了解但如果你告诉我它是如何工作的我可以将它应用到我的程序（lol）注意：我在这里看到这个问题： Bootstrap Alert自动关闭所选答案是：

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

但我很困惑，我该如何使它工作？

Answer 1

$("#success-alert")是一个选择器...您正在选择页面的哪个部分将采取以下操作。 在这种情况下，它会查找id为success-alert的元素。

页面中的asp控件的ID是自动生成的，但可以通过控件.ClientId属性访问。

因此，您需要执行该javascript，但将success-alert替换为InfoPanel控件的客户端ID

默认情况下，Javascript会在页面加载后立即执行（有办法延迟它）。 在您的情况下，最简单的方法是在包含消息的响应中包含<script>块。

供您参考， fadeTo文档值得一读。 传入的参数是延迟（在您的示例中为2000毫秒）和不透明度（应为0-1）。 在它消失之后，它会在500ms的过程中向上滑动（想想一个闭合的六角琴）。

function() {}是一个匿名函数，在动画完成后调用。 就像一个lambda。 您可以选择使用它来完成您需要的任何其他整理，但不应该这样做。

自从我做了网络表格以来已经有一段时间了，但我想你在信息框的末尾想要这样的东西

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

例如，等待5秒，然后淡出超过1/2秒

Answer 2

您可以设置计时器并在5秒后淡出。

就像是

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

Answer 3

我找到了这个并且它有效： 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（函数，延迟）