In this article, we will learn about the Alerts JavaScript behavior Events fired when interacting with Bootstrap 5 Alerts. Bootstrap 5 Alert component is useful for providing alerts or feedback messages arising from the user interacting with the functionalities of the application.
Bootstrap 5 Alerts JavaScript behavior Events
- close.bs.alert: It is fired as soon as the close() method of the instance is called.
- closed.bs.alert: It is fired when the alert is completely closed after all the CSS transitions are done.
Syntax:
let myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
...
})
Let us understand more about this using some examples below:
Example 1: In this example, we will listen for the alert javascript behavior event, close.bs.alert, that gets fired immediately when an alert is closed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Behavior events</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success">GeeksforGeeks</h1>
<div id="alert" role="alert"
class="alert alert-warning alert-dismissible fade show" >
<strong>GFG Alert!</strong> This is a sample alert from GFG.
<button type="button" class="btn-close"
data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
<script>
const alert = document.getElementById('alert')
alert.addEventListener('close.bs.alert', () => {
console.log('close instance method called!');
})
</script>
</body>
</html>
Output:
Example 2: In this example, we will listen for the alert javascript behavior event, closed.bs.alert, that gets fired when an alert is closed completely.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Alerts JavaScript behavior Events</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success">GeeksforGeeks</h1>
<div id="alert"
class="alert alert-warning alert-dismissible fade show" >
<strong>GFG Alert!</strong>
This is a sample alert from GFG.
<button type="button" class="btn-close"
data-bs-dismiss="alert"
aria-label="Close">
</button>
</div>
<script>
const alert = document.getElementById('alert')
alert.addEventListener('closed.bs.alert', () => {
console.log('alert completely closed!');
})
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/alerts/#events
