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 = "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" >w3wiki</ 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 = "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" >w3wiki</ 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
Contact Us