How to use modal closing event in Twitter Bootstrap ?

Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that’s 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.

Syntax:

class | tabindex | role | aria-labelledby

Approach: It shows the pop-up menu with the header, body, and footer with the close and submits button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="modal fade" 
     id="exampleModal" 
     tabindex="-1" 
     role="dialog" 
     aria-labelledby="exampleModalLabel" 
     aria-hidden="true">
    <div class="modal-dialog" role="document">
    </div>
</div>

chevron_right


Explanation: Below is a static modal example (meaning its position and display have been overridden) including the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title></title>
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
            integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
            crossorigin="anonymous"></script>
    <script src=
            integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src=
            integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
            crossorigin="anonymous"></script>
</head>
  
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" 
            data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>
  
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1"
         role="dialog" aria-labelledby="exampleModalLabel" 
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                      Modal title
                  </h5>
                    <button type="button" class="close" 
                            data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" 
                            data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">
                      Save changes</button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

chevron_right


filter_none

edit
close

play_arrow

link
brightness_4
code

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

chevron_right


Output:

Supported Browsers: It supports in Flex layout.

  • Chrome: Yes
  • Firefox: Yes (63.0)
  • Edge: No
  • Internet Explorer: No



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.



Improved By : Akanksha_Rai