Bootstrap 5 Alerts JavaScript behavior Events
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:
var 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.
HTML
<!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 =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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.
HTML
<!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 =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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
Last Updated :
07 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...