

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Questions & Answers
- 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
- Style the Bootstrap modal
- Force an element to be hidden with Bootstrap
- Hide Bootstrap Modal
- Toggle Bootstrap Modal
- Open Bootstrap Modal
- Execute a script when the document is about to be unloaded in HTML?
- Hidden Bootstrap class
- Header of the modal in Bootstrap
- Footer of the modal in Bootstrap
- Activate the content as a Bootstrap modal
- Set large modal in Bootstrap
- Set small modal in Bootstrap
Advertisements