How to handle the modal closing event in Twitter Bootstrap?

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:,,, etc. Out of all these events, we are interested in the and events.

  • This event is fired immediately when the hide instance method has been called.
  • This event is fired when the modal has finished being hidden from the user and will then wait for CSS transitions to complete.







<!DOCTYPE html>
<html lang="en">
    <!-- 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=
        Modal closing event in Bootstrap
        h6 {
            margin: 2%;
        .btn {
            margin-left: 2%;
        <h1 style="color:green;">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#gfgModal">
            Launch Modal
        <!-- Modal -->
        <div class="modal fade" id="gfgModal" tabindex="-1"
            role="dialog" aria-labelledby="gfgModalLabel"
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" 
                        <!-- The title of the modal -->
                        <button type="button" class="close" 
                            <span aria-hidden="true">×</span>
                    <div class="modal-body">
                        <!-- The content inside the modal box -->
                            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.
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                        <!-- The close button in the bottom
                             of the modal -->
                        <button type="button" class="btn btn-primary">
                        <!-- The save changes button in 
                            the bottom of the modal -->
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src=
        <script src=
    <!-- Modal JQUERY logic -->
    <script type="text/javascript">
        $('#gfgModal').on('', function (e) {
            // Fire a function in the console
            console.log('Function executed when gfgModal closed');
            // Alert the user
            alert('Alert fired when gfgModal closed')



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

My Personal Notes arrow_drop_up

Jadavpur University IT Undergrad 22

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.