I have used the hidden.bs.modal event, but it doesn't work. I tried with the code below. I really don't know what to do.

$('#myModal').on('hidden.bs.modal', function(e) {
  alert('test');
})

// I also tried this:
/*
jQuery(document).ready(function(e) {
  $(document).on('show.bs.modal', '#myModal', function() {
    alert('hi');
  })
});
*/

<script src=".4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src=".4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src=".2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<button id="myModal" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

I have used the hidden.bs.modal event, but it doesn't work. I tried with the code below. I really don't know what to do.

$('#myModal').on('hidden.bs.modal', function(e) {
  alert('test');
})

// I also tried this:
/*
jQuery(document).ready(function(e) {
  $(document).on('show.bs.modal', '#myModal', function() {
    alert('hi');
  })
});
*/

<script src="https://code.jquery./jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<button id="myModal" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

• javascript
• jquery
• twitter-bootstrap
• bootstrap-4
• bootstrap-modal

• 2 Doesn't work in what sense ? what error you have in the console for eg ? and why do you have 2 different versions of jquery imported ? – Mihai T Commented Feb 3, 2020 at 11:34

4 Answers 4

There's a couple of issues here. Firstly use a single version of jQuery in the page. Using multiple will causes issues such as references to the libraries you include being lost. Secondly, you need to include the Bootstrap stylesheet for the modal to appear correctly in the UI.

Lastly, and most importantly, you're using the #myModal id twice in the DOM on two separate elements. This is invalid. Remove it from the button. It should only be placed on the div which holds the modal content. Try this:

jQuery(function($) {
  $('#myModal').on('hidden.bs.modal', function(e) {
    alert('test');
  });
});

<script src="https://code.jquery./jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

For me, the problem was in calling $('#myModal').on('event', function(){}) before DOM was loaded. When I moved this call to $(document).ready(function() { all started working. This is not my idea. Found it in another similar thread. Bootstrap modal event not fired

Original response by dfsq https://stackoverflow./users/949476/dfsq

After hours of testing, I figured that we must follow the exact the structure as in Bootstrap Documentation. In this case, you missed the role="document"

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

I've tried all these solutions and each one gets it close but has their own set of issues. After an annoying amount of tinkering I've found a way that works and so far seems to work well.

Here's your button, free of charge:

<button id="buttonfor_secondModal" type="button" class="btn btn-primary">Open Second Modal</button>

Put this at the bottom of the page:

    <script>
    $('#buttonfor_secondModal').click(function(){
              $('#firstModal').modal('toggle');
              $('#secondModal').modal('toggle')
          });

    /*****************************************************************
    the modal backdrop wont be removed when you close the second modal
    so you need to do it or the user will be stuck on a grayed out page
    ******************************************************************/
    $('#secondModal').on('hidden.bs.modal', function () {
                // Load up a new modal...
              $(".modal-backdrop").remove();
              })
    </script>