How to handle the modal closing event in Twitter Bootstrap?

03 Jun, 2020
Modal Closing Event in Twitter Bootstrap | Set 1
Prerequisite Knowledge: Bootstrap 4 | Modal
Twitter Bootstrap’s modal class offer a few events that are fired at the standard Bootstrap modal class. Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that is 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.
The Bootstrap Events are: show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal etc. Out of all these events, we are interested in the hide.bs.modal and hidden.bs.modal events.
hide.bs.modal: This event is fired immediately when the hide instance method has been called.
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user and will then wait for CSS transitions to complete.
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,            initial-scale=1, shrink-to-fit=no">      <!-- link to Bootstrap CSS CDN -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"        crossorigin="anonymous">      <title>        Modal closing event in Bootstrap    </title>      <style>        h1,        h6 {            margin: 2%;        }          .btn {            margin-left: 2%;        }    </style></head>  <body>    <center>        <h1 style="color:green;">            GeeksforGeeks        </h1>          <!-- Button trigger modal -->        <button type="button" class="btn btn-primary"            data-toggle="modal" data-target="#gfgModal">            Launch Modal        </button>          <!-- Modal -->        <div class="modal fade" id="gfgModal" tabindex="-1"            role="dialog" aria-labelledby="gfgModalLabel"            aria-hidden="true">            <div class="modal-dialog" role="document">                <div class="modal-content">                    <div class="modal-header">                        <h6 class="modal-title"                                 id="gfgModalLabel"                                 style="color:green;">                            GeeksforGeeks                        </h6>                                                  <!-- The title of the modal -->                        <button type="button" class="close"                                 data-dismiss="modal"                                 aria-label="Close">                            <span aria-hidden="true">×</span>                        </button>                    </div>                      <div class="modal-body">                          <!-- The content inside the modal box -->                          <p>                            Articles that need little modification/                            improvement from reviewers are published                             first. To quickly get your articles                             reviewed, please refer existing articles,                             their formating style, coding style, and                            try to make your close to them.                        </p>                      </div>                    <div class="modal-footer">                        <button type="button" class="btn btn-secondary"                                data-dismiss="modal">Close</button>                          <!-- The close button in the bottom                             of the modal -->                        <button type="button" class="btn btn-primary">                            okay                        </button>                        <!-- The save changes button in                             the bottom of the modal -->                    </div>                </div>            </div>        </div>          <!-- Optional JavaScript -->        <!-- jQuery first, then Popper.js, then Bootstrap JS -->        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"            crossorigin="anonymous">        </script>                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"             crossorigin="anonymous">        </script>                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"            crossorigin="anonymous">        </script>    </center>      <!-- Modal JQUERY logic -->    <script type="text/javascript">        $('#gfgModal').on('hidden.bs.modal', function (e) {              // Fire a function in the console            console.log('Function executed when gfgModal closed');                          // Alert the user            alert('Alert fired when gfgModal closed')        })    </script></body>  </html>
Output:
Before Clicking the Button:
After Clicking the Button:
On closing modal, observe the console:
So when modal is closed, we successfully handle it using
Fire an output in the console
Alert the user
Bootstrap-4
Bootstrap-Misc
Bootstrap
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to Add Image into Dropdown List for each items ?
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
How to add options to a select element using jQuery?
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery