asp.net 引导警报自动关闭

Posted 2023-02-22

【中文标题】asp.net 引导警报自动关闭

【英文标题】：asp.net bootstrap alert auto close

【发布时间】：2014-12-12 09:27:25

【问题描述】：

我的 .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');
);

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

【参考方案1】：

我找到了这个，它可以工作：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)

【参考方案2】：

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

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

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

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

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

最后的function() 是一个匿名函数，在动画完成后调用。很像一个 lambda。您可以选择使用它来进行您需要的任何其他整理，但这不是必需的。

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

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

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

【讨论】：

我应该把这个放在哪里？我试过把它放在面板下方和面板里面，但两种方式都行不通？

您能否提供一个.aspx 页面的示例，其中包含一个按钮和触发按钮单击事件后的自动关闭面板？

如果你把它放在</asp:Panel>之前应该可以工作。如果不是，你需要给我一些调试信息。您的浏览器可能具有开发人员工具（Chrome 中的 F12、Firefox 中的 Ctrl-Shift-K、IE 中的菜单选项）。转到控制台选项卡并观察当您显示消息时发生的情况。如果有任何语法错误/类似问题，您应该会看到列出的错误。如果您什么也没看到，请使用检查选项卡（或布局取决于浏览器）查看 生成的 源。这是页面现在的样子，而不是你第一次得到它时的样子。确保您可以看到 jscript。

（抱歉，目前没有时间模拟示例，但如果我完成工作后您仍有问题，我会为您完成）

我在控制台上什么也看不到，我会等待你的模型示例，非常感谢！

【参考方案3】：

您可以设置一个计时器，并在 5 秒后将其淡出。

有点像

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

【讨论】：

您能否提供一个 .aspx 页面的示例，其中包含一个按钮和触发按钮单击事件后的自动关闭面板？