How do I know which button is clicked when the bootstrap modal closes?

To extend @JoshCrozier's answer:

It would be nice if they had a property like that associated with the hide.bs.modal/hidden.bs.modal events. As of writing this, there currently isn't

---

This will emulate a similar behaviour, that attaches the clicked button as relatedTarget for later listeners:

$( '.modal-footer .btn[data-dismiss="modal"]' ).on( 'click', function() {
    var target = this

    $( target ).closest( '.modal' )
        .one( 'hide.bs.modal hidden.bs.modal', function( event ) {
            event.relatedTarget = target
        } )
} )

The selector and listener can be further optimized depending on how the modals are used in a project. For example: if you know you're not going to use hide.bs.modal you can just modify hidden.bs.modal's event instead.

This works too:

$('#myModal').on('hide.bs.modal', function (e) { 
var tmpid = $(document.activeElement).attr('id'); alert(tmpid); 
}); 

It won't get the id of the 'X' on the modal unless you id it. Will return the id of the element which triggers the closing of the modal....

Option #1

Within the hidden.bs.modal event listener, event.target refers to the modal element that is hidden, not the clicked element that triggered the event.

If you want to determine which button triggered the modal to close, one option is to add event listeners to the button elements inside of the modal. Then inside of the button event listener you could listen to the hidden.bs.modal event on the parent #modal element in order to determine if the modal was closed. Since the hidden.bs.modal event listener is inside of the button click event listener, you still have a reference to the element that triggered the click event.

Example Here

$('#delete-file-modal .modal-footer button').on('click', function(event) {
  var $button = $(event.target); // The clicked button

  $(this).closest('.modal').one('hidden.bs.modal', function() {
    // Fire if the button element 
    console.log('The button that closed the modal is: ', $button);
  });
});

It's also worth mentioning that the .one() method will only fire the event once each time it is attached (which is exactly what we want). Otherwise, if you used .on() or .click() to attach the event, then the event could fire multiple times since it is reattached each time the click event listener is fired.

---

Option #2

According to the relevant Bootstrap documentation, the show.bs.modal/shown.bs.modal events have a relatedTarget property attached to the event.

If caused by a click, the clicked element is available as the relatedTarget property of the event.

Thus, you can determine the element that triggered the modal to open event by accessing event.relatedTarget inside of the modal show event listener:

Example Here

$('#delete-file-modal').on('show.bs.modal', function (event) {
    console.log(event.relatedTarget);
});

Keep in mind that the relatedTarget property is only associated with the modal show events. It would be nice if they had a property like that associated with the hide.bs.modal/hidden.bs.modal events. As of writing this, there currently isn't.

---

Option #3

As Andrew pointed out in the comments below this answer, you can also check to see which element on the page has focus by accessing document.activeElement.

In the snippet below, an event listener is attached to the modal element for the show and hide events. When the event is triggered, a check is made to see if the currently focused on element has a [data-toggle] or [data-dismiss] attribute (which implies that it did in fact trigger the event).

Example Here

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);
  
  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    console.log($activeElement);
  }
});

If you are listening to both show/hide events, like in the example above, and you want to differentiate between the events, you could check event.type:

Example Here

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);
  
  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    if (event.type === 'hide') {
      // Do something with the button that closed the modal
      console.log('The button that closed the modal is: ', $activeElement);
    }
    
    if (event.type === 'show') {
      // Do something with the button that opened the modal
      console.log('The button that opened the modal is: ', $activeElement);
    }
  }
});