Open In App

How to handle the modal closing event in Twitter Bootstrap?

Last Updated : 03 Jun, 2020
Like Article

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

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads