- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Bootstrap Event when the modal is about to be hidden
The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.
Firstly, hide the Bootstrap modal on button click −
$("#button1").click(function(){ $("#newModal").modal("hide"); });
Now, use the hide.bs.modal class and generate the alert when the modal is about to hide on button click −
$("#newModal").on('hide.bs.modal', function () { alert('The modal is about to be hidden.'); });
Let us see an example stating the usage of hide.bs.modal event −
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; font-size:15px; position: absolute; margin: 0 auto; } </style> </head> <body> <div class="container"> <h2>Sample</h2> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <button type="button" class="btn btn-default btn-lg" id="button1">Click to hide</button> <div class="modal fade" id="newModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Sample Modal</h4> </div> <div class="modal-body"> <p>This is demo text.</p> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#newModal").modal("show"); $("#button1").click(function(){ $("#newModal").modal("hide"); }); $("#newModal").on('hide.bs.modal', function () { alert('The modal is about to be hidden.'); }); }); </script> </body> </html>
- Related Articles
- Bootstrap Event when the modal is about to be shown
- Bootstrap Event when the modal is fully hidden
- Bootstrap Event when the modal is fully shown
- Force an element to be hidden with Bootstrap
- Style the Bootstrap modal
- Hide Bootstrap Modal
- Open Bootstrap Modal
- Toggle Bootstrap Modal
- Hidden Bootstrap class
- Bootstrap .modal("hide") method
- Bootstrap .modal("show") method
- Bootstrap .modal("toggle") method
- Header of the modal in Bootstrap
- Footer of the modal in Bootstrap
- Usage of Bootstrap Modal Plugins

Advertisements