Bootstrap5 Toasts Events are events that take place when the toast triggers a specific instance method. These are used to perform some tasks when these instances are triggered.
Toasts Events:
- show.bs.toast: This event is called when show instance method of toast is called.
- shown.bs.toast: This event is called when toast is shown to the user.
- hide.bs.toast: This event is called when the toast hide instance is evoked.
- hidden.bs.toast: This event is called when toast closing is finished.
Syntax:
var myToastEl = document.getElementById('#id') myToastEl.addEventListener($EVENT, function () { ... })
The $EVENT can be replaced by any of the above-mentioned events.
Example 1: In this example, we will learn about shown.bs.toast. It will trigger after the toast is shown.
HTML
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center col-8" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap 5 Toasts Events
</ h2 >
< div class = "container text-center" >
< button type = "button" class = "btn btn-primary" id = "success" onClick = "showToast()" >
Show
</ button >
< div class = "toast text-white bg-primary" id = "GFG" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2" width = "40px" alt = "GFG Logo" >
< strong class = "me-auto" >
Toast Events
</ strong >
< button type = "button" class = "btn-close" data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
Welcome to GeeksforGeeks
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
var myToastEl = document.getElementById('GFG')
myToastEl.addEventListener('shown.bs.toast', function () {
alert("Shown bs Toast called")
})
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we will learn about hidden.bs.toast which is triggered when the toast is hidden.
HTML
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center col-8" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap 5 Toasts Events
</ h2 >
< div class = "container text-center" >
< button type = "button" class = "btn btn-primary" id = "success" onClick = "showToast()" >
Show
</ button >
< div class = "toast text-white bg-primary" id = "GFG" >
< div class = "toast-header" >
< img src =
class = "img-thumbnail rounded me-2" width = "40px" alt = "GFG Logo" >
< strong class = "me-auto" >
Toast Success
</ strong >
< button type = "button" class = "btn-close" data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
Welcome to GeeksforGeeks
</ p >
</ div >
</ div >
</ div >
</ div >
< script >
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
var myToastEl = document.getElementById('GFG')
myToastEl.addEventListener('hidden.bs.toast', function () {
alert("Hidden bs Toast called")
})
}
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#events