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:
<!DOCTYPE html>
<head>
<title>Alert in boostrap</title>
<link rel="stylesheet" href=".3.1/css/bootstrap-combined.min.css">
<script type="text/javascript" src=".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
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:
<!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
Share Improve this question asked Jan 23, 2014 at 6:07 franvergara66franvergara66 10.8k21 gold badges61 silver badges102 bronze badges 1- ,i believe what you are looking for is toastr jquery plugin or pnotify plugin.Do check them out. :) – Joseph Commented Jan 23, 2014 at 6:11
4 Answers
Reset to default 19Firstly, you're missing jQuery library, include it before bootstrap.min.js
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Secondly, it should be #alert_message instead of .alert-message:
window.setTimeout(function() {
$("#alert_message").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 3000);
Bootply Demo
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")
<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>
Check Out Bootstrap Notify it's an extremely versatile alerts plugin using dependencies of jQuery and Bootstrap. It's available under MIT licence.
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.