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=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body class="m-4">
<h1 class="text-success">
GeeksforGeeks
</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=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body class="m-3">
<h1 class="text-success">
GeeksforGeeks
</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