twitter-bootstrap 使用 twitter 的引导程序发出警报几秒钟后消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21300647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an alert using twitter's bootstrap disappears after a few seconds
提问by franvergara66
im trying to learn twitter's bootstrap CSS framework to make some alerts to the users, I want, after showing the alert to the user, the alert disappears after 3 seconds have elapsed. I make this code, but does not work, can not close the alert, and do not understand what I'm doing wrong:
我正在尝试学习 twitter 的引导 CSS 框架来向用户发出一些警报，我想在向用户显示警报后，警报在 3 秒后消失。我制作了这段代码，但不起作用，无法关闭警报，也不明白我做错了什么：
<!DOCTYPE html>
<head>
<title>Alert in boostrap</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.setTimeout(function() {
$(".alert-message").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 3000);
</script>
</head>
<body >
<br><br>
<div class="container">
<h1>This is a test</h1>
<div id="alert_message" class="alert" style="width:200px" >
<span class="close" data-dismiss="alert">×</span>
<span><strong>Atention!</strong> Responsive Design with Twitter Bootstrap.</span>
</div>
</div>
</body>
</html>
ps: im newbie in the art of web programming, have a little patience if the question or error is very obvious or stupid. Thank you very much to all
ps：我是网络编程艺术的新手，如果问题或错误非常明显或愚蠢，请耐心等待。非常感谢大家
回答by Felix
Firstly, you're missing jQuery library, include it before bootstrap.min.js
首先，您缺少 jQuery 库，请先包含它 bootstrap.min.js
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Secondly, it should be #alert_messageinstead of .alert-message:
其次，它应该#alert_message代替.alert-message：
window.setTimeout(function() {
$("#alert_message").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 3000);
回答by Hail Hydra
You have an error here $(".alert-message")with this you are saying that you have a class with the name "alert-message" but you don't, you have and id not a class so it would be $("#alert_message")
你在这里有一个错误$(".alert-message")，你说你有一个名为“alert-message”的类，但你没有，你有并且id不是一个类，所以它会是$("#alert_message")
回答by Zabkas
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="alert alert-success" id="success-alert">The message was sent</div>
<script>
$(".alert").delay(4000).slideUp(200, function() {
$(this).alert('close');
});
</script>
回答by Richard
Check Out Bootstrap Notifyit's an extremely versatile alerts plugin using dependencies of jQuery and Bootstrap. It's available under MIT licence.
Check Out Bootstrap Notify它是一个非常通用的警报插件，使用 jQuery 和 Bootstrap 的依赖项。它在 MIT 许可下可用。
Calling a new notification is as easy as $.notify('Hello World')but you can get as complex as you like, add images, icons, hyperlinks, resize it, restyle it.
调用新通知非常简单，$.notify('Hello World')但您可以随心所欲地变得复杂，添加图像、图标、超链接、调整大小、重新设计样式。
