Bootstrap 5 Modal toggle() Method
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div > < h1 class = "text-success" > w3wiki </ 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" > w3wiki </ h5 > </ div > < div class = "modal-body" > < p >w3wiki is a computer science portal for Beginner. </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div > < h1 class = "text-success" > w3wiki </ 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" > w3wiki </ 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
Contact Us