Bootstrap 5 Modal toggle() Method
Last Updated :
30 Nov, 2022
The Bootstrap 5 Modal toggle() method is used to directly toggle a modal i.e. show or hide. This method shows the result before the show or hide event occurs.
Syntax:
modal.toggle()
Return Value: The user receives a direct response from this method before the modal is ever displayed or hidden.
Example 1: In this article, we used the toggle() method of the Bootstrap 5 Modal component to toggle its visibility. Here the modal’s visibility is toggled when we click the button and after 3 seconds it toggles its visibility again.
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 Modal toggle() Method</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h5 >Bootstrap 5 Modal toggle() Method</ h5 >
</ div >
< button class = "btn btn-success"
onclick = "toggleModal1()" >
Toggle Modal
</ button >
< div id = "gfg" class = "modal" tabindex = "-1" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
GeeksforGeeks
</ h5 >
</ div >
< div class = "modal-body" >
< p >GeeksforGeeks is a computer
science portal for geeks.
</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
var modal1 =
new bootstrap.Modal(document.getElementById('gfg'));
function toggleModal1() {
// Toggle Modal
modal1.toggle();
// Toggle again after 3 seconds
setTimeout(() => {
modal1.toggle();
}, 3000)
}
</ script >
</ body >
|
Output:
Example 2: This is another example illustrating the use of the toggle() method of the Modal component with buttons.
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 Modal toggle() Method</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h5 >Bootstrap 5 Modal
toggle() Method
</ h5 >
</ div >
< button class = "btn btn-success"
onclick = "toggleModal1()" >
Toggle Modal
</ button >
< div id = "gfg" class = "modal" tabindex = "-1" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
GeeksforGeeks
</ h5 >
< button type = "button"
class = "btn-Decline"
data-bs-dismiss = "modal"
aria-label = "Decline" >
</ button >
</ div >
< div class = "modal-body" >
< p >We have updated our Privacy Policy.
Accept it to continue .
</ p >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-danger"
data-bs-dismiss = "modal" >
Decline
</ button >
< button type = "button"
class = "btn btn-success" >
Accept
</ button >
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
var modal1 = new bootstrap.Modal(document.getElementById('gfg'));
function toggleModal1() {
// Toggle Modal
modal1.toggle();
}
</ script >
</ body >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#toggle
Share your thoughts in the comments
Please Login to comment...