When I first saw the alerts in Bootstrap I thought they would behave like the modal window does, dropping down or fading in, and then fading out when closed. But it seems li
I got this way to close fading my Alert after 3 seconds. Hope it will be useful.
setTimeout(function(){
$('.alert').fadeTo("slow", 0.1, function(){
$('.alert').alert('close')
});
}, 3000)
Of course, Yes. Use this simple file in your project: https://gist.github.com/3851727
First add you HTML like this:
<div id="messagebox" class="alert hide"></div>
and then use:
$("#messagebox").message({text: "Hello world!", type: "error"});
You can pass all bootstrap alert types such as error
, success
and warning
to type
property as options.
I don't agree with the way that Bootstrap uses fade in
(as seen in their documentation - http://v4-alpha.getbootstrap.com/components/alerts/), and my suggestion is to avoid the class names fade
and in
, and to avoid that pattern in general (which is currently seen in the top-rated answer to this question).
(1) The semantics are wrong - transitions are temporary, but the class names live on. So why should we name our classes fade
and fade in
? It should be faded
and faded-in
, so that when developers read the markup, it's clear that those elements were faded
or faded-in
. The Bootstrap team has already done away with hide
for hidden
, why is fade
any different?
(2) Using 2 classes fade
and in
for a single transition pollutes the class space. And, it's not clear that fade
and in
are associated with one another. The in
class looks like a completely independent class, like alert
and alert-success
.
The best solution is to use faded
when the element has been faded out, and to replace that class with faded-in
when the element has been faded in.
So to answer the question. I think the alert markup, style, and logic should be written in the following manner. Note: Feel free to replace the jQuery logic, if you're using vanilla javascript.
HTML
<div id="saveAlert" class="alert alert-success">
<a class="close" href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
CSS
.faded {
opacity: 0;
transition: opacity 1s;
}
JQuery
$('#saveAlert .close').on('click', function () {
$("#saveAlert")
.addClass('faded');
});
This is very important question and I was struggling to get it done (show/hide) message by replacing current and add new message.
Below is working example:
function showAndDismissAlert(type, message) {
var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
$(".alert-messages").prepend(htmlAlert);
$(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
$(this).remove();
});
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-messages"></div>
<div class="buttons">
<button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
<button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
<button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>
Hope it will help others!
None of the current answers worked for me. I'm using Bootstrap 3.
I liked what Rob Vermeer was doing and started from his response.
For a fade in and then fade out effect, I just used wrote the following function and used jQuery:
Html on my page to add the alert(s) to:
<div class="alert-messages text-center">
</div>
Javascript function to show and dismiss the alert.
function showAndDismissAlert(type, message) {
var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
// Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
$(".alert-messages").prepend(htmlAlert);
// Since we are prepending, take the first alert and tell it to fade in and then fade out.
// Note: if we were appending, then should use last() instead of first()
$(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}
Then, to show and dismiss the alert, just call the function like this:
showAndDismissAlert('success', 'Saved Successfully!');
showAndDismissAlert('danger', 'Error Encountered');
showAndDismissAlert('info', 'Message Received');
As a side note, I styled the div.alert-messages fixed on top:
<style>
div.alert-messages {
position: fixed;
top: 50px;
left: 25%;
right: 25%;
z-index: 7000;
}
</style>
Add hide
class to alert-message
. Then put the following code after your jQuery script import:
$(document).ready( function(){
$(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
window.setTimeout( function(){
$(".alert-message").slideUp();
}, 2500);
});
If you want handle multiple messages, this code will hide them in ascending order:
$(document).ready( function(){
var hide_delay = 2500; // starting timeout before first message is hidden
var hide_next = 800; // time in mS to wait before hiding next message
$(".alert-message").slideDown().each( function(index,el) {
window.setTimeout( function(){
$(el).slideUp(); // hide the message
}, hide_delay + hide_next*index);
});
});