All modern web application uses alerts to show messages to the user. These alerts have a close button to close them or can be closed automatically using Twitter Bootstrap. In this post, we will create automatically closing of alerts using twitter Bootstrap.
Basic idea is to use jQuery setTimeout() method to close the alert after specified time.
Syntax:
setTimeout(function, delay)
Note: Delay is defined in milliseconds. 1 second is equal to 1000 milliseconds.
Example 1: In this example, alert is accessed in script using the id and then alert is closed after 5 seconds.
<!DOCTYPE html>
<html>
<head>
<title>
How to Automatically Close Alerts
using Twitter Bootstrap ?
</title>
<!-- Including Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Including jQuery -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<!-- Including Bootstrap JS -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h3>Automatically closing the alert</h3>
<!-- Showing alert -->
<div id="alert" class="alert alert-danger">
This alert will automatically
close in 5 seconds.
</div>
<script type="text/javascript">
setTimeout(function () {
// Closing the alert
$('#alert').alert('close');
}, 5000);
</script>
</body>
</html>
tham khảo tại đây.
