asp.net引导警报自动关闭
我有这个面板在我的.aspx webform页面上显示按钮回发事件后的消息(成功,失败,异常等)。我也在这个页面中包含了一些Jquery库。asp.net引导警报自动关闭
<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');
});
但我很困惑,我该怎么办让它起作用?
我发现这一个,它的工作原理: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>
$("#success-alert")
是一个选择器...您正在选择下面的动作将被采取的页面的哪一部分。在这种情况下,它会寻找id
为success-alert
的元素。
页面中的asp控件的Id是自动生成的,但可以通过控件.ClientId
属性进行访问。
所以,你需要来执行JavaScript,但与InfoPanel
控制
默认情况下的客户端ID替换success-alert
,使用Javascript,只要它是由页面加载执行(有办法拖延的话)。在你的情况下,最简单的方法是在包含消息的响应中包含一个<script>
块。
仅供参考,fadeTo documentation值得一读。传递的参数是延迟(在你的例子中是2000毫秒)和不透明度(应该是0-1)。消失后,它会在500毫秒的时间内滑动(想象一下关闭的六角琴)。
function() {}
最后是在动画完成后调用的匿名函数。就像拉姆达一样。你可以选择使用它来完成你需要的任何其他整理,但它不应该被要求。
它已经相当一段时间,因为我做的WebForms,但我想你想你的信息框
<script type="text/javascript">
$("#<%=InfoPanel.ClientID%>").delay(5000).fadeTo(500, 0);
</script>
EG结束这样的等待5秒钟,然后淡出超过1/2秒
您可以设置一个计时器并在5秒后淡出计时器。
喜欢的东西
setTimeout(function() {
$("#success-alert").fadeOut(100, null);
}, 5000);
您是否可以在按钮点击事件触发后提供带按钮和自动关闭面板的.aspx页面示例? – 2014-10-17 07:21:04
应该在哪里我把这个?我试图把它放在面板下方和面板内,但两种方式都行不通? – 2014-10-17 05:42:16
您是否可以在触发按钮单击事件后提供带按钮和自动关闭面板的.aspx页面示例? – 2014-10-17 07:20:31
如果你把它放在''之前,它应该可以工作。如果不是,你需要给我一些调试信息。您的浏览器可能具有开发人员工具(Chrome中的F12,Firefox中的Ctrl-Shift-K,IE中的菜单选项)。转到“控制台”选项卡并观看导致显示消息时发生的情况。如果有anysyntax错误/类似的问题,你应该看到列出的错误。如果您什么都看不到,请使用检查标签(或布局取决于浏览器)查看_generated_来源。这就是现在的页面,而不是当你第一次看到它时。确保你可以看到jscript。 – Basic 2014-10-17 08:17:18