How to hide Bootstrap modal with JavaScript? Last Updated : 05 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report This article will tell us how the bootstrap executes when the .modal (modal window) gets closed. At some point of time, the modal window – whenever it gets opened (along with the class modal), it is going to get closed.As soon the modal has got finished, after being getting hidden from the user, the event will be fired up. The function will get executed and also the below syntax will be triggered, whenever the modal window gets hidden away. By the way, it will call to the caller/user, before disappearing straight away. Also, this is not managed by the user at all. The Bootstrap library is built-in already, and it is going to do the maximum work for you.The below syntax will be used when the Bootstrap modal is about to be hidden or to hide the Bootstrap modal.Syntax:hide.bs.modalExample: This example shows the usage of hide.bs.modal. html <!DOCTYPE html> <html> <head> <h2 style="color:green"> GeeksForGeeks </h2> <h2 style="color:purple"> Hide Bootstrap Modal </h2> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> <style> #myBtn { width: 300px; padding: 10px; font-size: 20px; position: absolute; margin: 0 auto; right: 0; left: 0; bottom: 50px; z-index: 9999; } </style> </head> <body style="text-align:center"> <div class="container"> <h2>Modal Events - hide.bs.modal</h2> <!-- Trigger the modal with a button --> <button type="button" style="color:brown" class="btn btn-info btn-md" id="myBtn"> Hide Modal </button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title"> Modal Header: GeeksForGeeks </h4> </div> <div class="modal-body"> <p>The <strong>hide.bs.modal</strong> is going to hide the modal.</p> <p>If you wish to trigger the modal and see the modal get hidden, then press the <strong>'HIDE MODAL'</strong> button. </p> </div> </div> </div> </div> </div> <script> $(document).ready(function() { $("#myModal").modal("show"); $("#myBtn").click(function() { $("#myModal").modal("hide"); }); $("#myModal").on('hide.bs.modal', function() { alert('The modal is about to be hidden.'); }); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Bootstrap 5 Modal Via JavaScript S SohomPramanick Follow Improve Article Tags : JavaScript Web Technologies Bootstrap-Misc JavaScript-Questions Similar Reads How to configure modal width in Bootstrap? Bootstrap Modal: It is a dialog window that opens inside the browser window on triggering certain events. It is a really convenient way to improve the website's content rendering as per the requirements. In this article, we will focus on adjusting the width/height of the modal box.Method 1: Using pr 2 min read Bootstrap 5 Modal Via JavaScript Bootstrap 5 modal via JavaScript allows for the dynamic creation of models using JavaScript. Utilize Bootstrap's modal API to trigger modal display, content loading, and event handling for interactive and responsive user experiences.Prerequisite: Bootstrap 5 Modal Bootstrap 5 Modal Usage MethodsBoot 2 min read How to Create Modal using Bootstrap? Bootstrap modal box is a UI component that displays content overlaid on the main page. Create it by defining a trigger button with data attributes and structuring the modal in HTML with a unique ID, allowing customization of content and functionality.Syntax:<div class="modal"> Contents... < 4 min read How to use modal closing event in Twitter Bootstrap ? Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that's customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap Modals are divided into three primary sections: header, body, and footer. Syntax: class | tabindex | role | ar 2 min read How to Pass Data into a Bootstrap Modal? Bootstrap along with HTML and JavaScript can be used to build responsive web pages. A modal is a popup or dialog box that requires some action to be performed. A modal. Bootstrap has an inbuilt modal component. The modal consists of two parts the modal header and the modal body. Data can be passed t 3 min read How to add bootstrap toggle-switch using JavaScript ? Bootstrap toggle-switch is a simple component used for activating one of the two given options. Commonly used as an on/off button. The CSS framework is a library that allows for easier, more standards-compliant web design using the Cascading Style Sheets language. Bootstrap 4 is one such widely used 2 min read Like