Bootstrap 5 Modal Events
Bootstrap5 Modal Events are the functionality provided by bootstrap to be added to the modals. The modal events are directly triggered at the modal only
Bootstrap 5 Modal Events:
- show.bs.modal: It is fired as soon as the show() method of the instance is called.
- shown.bs.modal: It is fired when the modal element is completely visible after all the CSS transitions are done.
- hide.bs.modal: It is fired as soon as the hide() method of the instance is called.
- hidden.bs.modal: It is fired when the modal element is completely hidden after all the CSS transitions are done.
- hidePrevented.bs.modal: It is fired when the modal element is shown, and the user clicks on the backdrop or presses the ESC key on the keyboard.
Syntax:
var myModalEl = document.getElementById('myModal') myModalEl.addEventListener('modal_Event', function (event) { // do something... })
Below examples illustrate the Bootstrap 5 Modal Events:
Example 1: In this example, we will listen for the modal events, show.bs.modal, and shown.bs.modal, which gets fired when a modal is toggled visible.
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" > < 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 class = "m-4" > < h1 class = "text-success" > w3wiki </ h1 > < button type = "button" data-bs-toggle = "modal" data-bs-target = "#gfgModal" > Launch GFG modal </ button > < div class = "modal fade" id = "gfgModal" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < h1 class = "text-success" > This is a GFG Modal </ h1 > </ div > < div class = "modal-footer" > < button data-bs-dismiss = "modal" > Close Modal </ button > </ div > </ div > </ div > </ div > < script > const modal = document.getElementById('gfgModal') modal.addEventListener('show.bs.modal', () => { console.log('show instance method called!'); }) modal.addEventListener('shown.bs.modal', () => { console.log('modal element completely visible!'); }) </ script > </ body > </ html > |
Output:
Example 2: In this example, we will listen for the modal events, hide.bs.modal and hidden.bs.modal, that gets fired when a modal 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" > < 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 class = "m-3" > < h1 class = "text-success" > w3wiki </ h1 > < button type = "button" data-bs-toggle = "modal" data-bs-target = "#gfgModal" > Launch GFG modal </ button > < div class = "modal fade" id = "gfgModal" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < h1 class = "text-success" > This is a GFG Modal </ h1 > </ div > < div class = "modal-footer" > < button data-bs-dismiss = "modal" > Close Modal </ button > </ div > </ div > </ div > </ div > < script > const modal = document.getElementById('gfgModal') modal.addEventListener('hide.bs.modal', () => { console.log('hide instance method called!'); }) modal.addEventListener('hidden.bs.modal', () => { console.log('modal element completely hidden!'); }) </ script > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#events
Contact Us