How to Automatically Close Alerts using Twitter Bootstrap
Calling window.setTimeout(function, delay)
will allow you to accomplish this. Here's an example that will automatically close the alert 2 seconds (or 2000 milliseconds) after it is displayed.
$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);
If you want to wrap it in a nifty function you could do this.
function createAutoClosingAlert(selector, delay) {
var alert = $(selector).alert();
window.setTimeout(function() { alert.alert('close') }, delay);
}
Then you could use it like so...
createAutoClosingAlert(".alert-message", 2000);
I am certain there are more elegant ways to accomplish this.
Bootstrap Alert Auto Close
For a smooth slide-up:-
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
$(document).ready(function() {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
$("#success-alert").slideUp(500);
});
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
<a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Twitter Bootstrap alert message close and open again
Data-dismiss completely removes the element. Use jQuery's .hide() method instead.
The fix-it-quick method:
Using inline javascript to hide the element onclick like this:
<div class="alert" style="display: none">
<a class="close" onclick="$('.alert').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('alert').show()">show</a>
http://jsfiddle.net/cQNFL/
This should however only be used if you are lazy (which is no good thing if you want an maintainable app).
The do-it-right method:
Create a new data attribute for hiding an element.
Javascript:
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
and then change data-dismiss to data-hide in the markup. Example at jsfiddle.
$("." + $(this).attr("data-hide")).hide()
This will hide all elements with the class specified in data-hide, i.e: data-hide="alert"
will hide all elements with the alert class.
Xeon06 provided an alternative solution:
$(this).closest("." + $(this).attr("data-hide")).hide()
This will only hide the closest parent element. This is very useful if you don't want to give each alert a unique class. Please note that, however, you need to place the close button within the alert.
Definition of .closest from jquery doc:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Auto-closing functionality on Twitter Bootstrap JS alerts
Alerts are not supposed to be auto-closed because the intention is to the user to notice any message before closing.
Although you can add a link so the user can close it manually this way.
<div class = "alert-message fade in" data-alert = "alert">
<a class="close" href="#">×</a>
<p>This is an alert!</p>
</div>
Or can be closed programatically this way:
$(".alert-message").alert('close')
How to auto close an alert after few seconds with Bootstrap?
You can use the Bootstrap methods to achieve this. Take a look here at the bottom of the page for more info.
Logic
When the button is clicked jQuery removes the class d-none
of the alert element which makes it visible. And then by using setTimeout()
JS will wait 2000ms before closing the alert with alert()
bootstrap 4 method.
It will work for only one click.
Note: using Bootstrap 4 methods requires to work with jQuery.
$('#btn').click(function(){
$('#alert').removeClass('d-none');
setTimeout(() => {
$('.alert').alert('close');
}, 2000);
})
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<div id="alert" class="alert alert-primary m-3 d-none" role="alert">
This is a primary alert—check it out!
</div>
<button class="btn btn-primary m-3" id="btn">
show alert and close it in 2 seconds
</button>
Bootstrap alert auto closing not working
$(this)
was changed inside the setTimeout
scope. Cache it in a variable. that
in my example.
$(function() {
var alert = $('div.alert[auto-close]');
alert.each(function() {
var that = $(this);
var time_period = that.attr('auto-close');
setTimeout(function() {
that.alert('close');
}, time_period);
});
});
WORKING SNIPPET:
$(function() { var alert = $('div.alert[auto-close]'); alert.each(function() { var that = $(this); var time_period = that.attr('auto-close'); setTimeout(function() { that.alert('close'); }, time_period); });});
<script src="https://code.jquery.com/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><div id="moo" class="alert alert-danger alert-dismissible" role="alert" auto-close="3000"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button> alert one</div><div class="alert alert-success alert-dismissible" role="alert" auto-close="5000"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button> alert two</div>
How can I show/hide a specific alert with twitter bootstrap?
You need to use an id selector:
//show
$('#passwordsNoMatchRegister').show();
//hide
$('#passwordsNoMatchRegister').hide();
#
is an id selector and passwordsNoMatchRegister
is the id of the div.
Related Topics
How Does the Location of a Script Tag in a Page Affect a JavaScript Function That Is Defined in It
How to Disable JavaScript Function Calls from the Browser Console
Angularjs - Placeholder for Empty Result from Filter
Distribute Elements Evenly Using CSS
Window.Getcomputedstyle Not Working for Shorthand Properties in Other Browsers Except Chrome
Style a D3 Element with Jquery and CSS
How to Generate Random Pastel (Or Brighter) Color in JavaScript
How to Change Tooltip Text for Google Chart API
JavaScript Add Class Depending on Current Url
Woocommerce: Disable Date on Edit Orders
Highcharts - Issue About Full Chart Width
Jquery Click Event Not Firing on the Element Created Dynamically Using Jquery
How to Host Material Icons Offline
JavaScript - Loading/Busy Indicator or Transparent Div Over Page on Event Click
How to Change the Label Size of a Material UI Textfield
Getting the Height of an Option Element with JavaScript