Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Here is my modal html code:

<div class="modal fade" id="delete-file-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" method="post" id="delete_file_form">

                <div class="modal-body">
                    Are you sure you want to delete this file?  
                </div>  

                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-danger" name="in_confirm_insert" id="confirm-delete-button">Delete</button>
                    <button data-dismiss="modal" class="btn btn-default" name="in_confirm_insert" id="cancel-delete-button">Cancel</button>
                </div>

            </form>
        </div>
    </div>
</div>

and here is my javascript code:

$('#delete-file-modal').on('hidden.bs.modal', function (e) {

    var delete_button = $(e.target).is("#confirm-delete-button");

    if(delete_button === true) {
        //delete file
        alert("file deleted.");
    } else {
        alert("delete failed.");
    };
});

I need to be able to check if the delete button is clicked when the delete-file-modal is closed. Is there something else missing in my javascript code?

like image 568
Nomad Avatar asked Feb 02 '15 02:02

Nomad


People also ask

How do you close a modal by clicking on a button?

To close a modal using vue. js you can use the click event i.e. @click to trigger change in modal visibility. So, whenever the close button is pressed the @click method will trigger the function associated with the action ( here, hiding the modal ).

How do I keep my Bootstrap modal from closing when I click outside?

When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.

Is Bootstrap modal responsive?

Bootstrap modals are supposed to be responsive by default. Something to look out for is if you have a width set on your Modal.


4 Answers

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);     }   } }); 
like image 134
Josh Crozier Avatar answered Sep 22 '22 11:09

Josh Crozier


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....

like image 29
Andrew Avatar answered Sep 23 '22 11:09

Andrew


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.

like image 22
Katai Avatar answered Sep 26 '22 11:09

Katai


The @JoshCrozier answer is good and useful but sometimes we need to Determine witch element triggered the modal to opened/closed AFTER it has been closed. (@Nomad has mentioned to this in the comments below the @JoshCrozier answer).

Also some times we need to determine which link or button in the body or header triggered the modal to close (not just buttons in the footer).

Then i write this solution to mix @JoshCrozier and @Katia answers with my way and improve the final solution:

Add this part to Scripts of your page:

$('body').on('click','.modal .dismiss-modal', function() {
    var closeRelatedTarget = this;
    var $modal = $(closeRelatedTarget).closest('.modal');
    $modal.one('hide.bs.modal hidden.bs.modal', function(event) {
        $modal.data('closeRelatedTarget',closeRelatedTarget);
    });
    $modal.data('closeRelatedTarget','wait');
    $modal.modal('hide');
});
$('body').on('show.bs.modal','.modal', function(event){
    $(this).data('closeRelatedTarget','anElement');
    $(this).data('showRelatedTarget',event.relatedTarget);
});

Now use it easily with simple Event Handlers or Get the target element:

● Determine witch element triggered the modal to show on show and shown (An embed Bootstrap feature):

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

and

 $('#MyModal').on('shown.bs.modal', function (event) {
     console.log(event.relatedTarget);
 });

● Determine witch element triggered the modal to close on hidden

 $('#BuyModal').on('hidden.bs.modal', function (event) {
      if($(this).data('closeRelatedTarget')=='wait')
      {return;}
 
      console.log($('#MyModal').data('closeRelatedTarget'));
 });

● Determine witch element triggered the modal to show even after the modal is closed

 console.log($('#MyModal').data('showRelatedTarget'));

● Determine witch element triggered the modal to close even after the modal is closed

 console.log($('#MyModal').data('closeRelatedTarget'));

Note: Instead of data-dismiss="modal" property use my modal-dismiss class to each element in the model that you can close the model and you want determine it (Don't use both modal-dismiss class and data-dismiss="modal" together).

Example: <a href="/more_info.html" class="dismiss-modal">More info</a>

Why? Because data-dismiss="modal" close the model and trigger hide and hidden before we set closeRelatedTarget.

like image 21
Ramin Bateni Avatar answered Sep 22 '22 11:09

Ramin Bateni