Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time

Question

I have one modal inside another modal and I've managed to make the inner one close without affecting the other. The problem is that when the second modal is closed it triggers the 'hidden.bs.modal' event for its self and for the first modal.




    
        
            
                
                 Demo Modal
            
            
                
                    Upload image
                
            
            
                
            
        
    
    
        
            
                
                    
                     Upload new image
                
                
                    Testing Area
                
                                
                    
                    
                
            
        
    



$('#btnUploadCancel').click(function () {
    $('#uploadImage').modal('toggle');
});

$(document).on('hidden.bs.modal', '#myModal', function () {
    alert("hello");
});

$(document).on('hidden.bs.modal', '#uploadImage', function () {
    alert("goodbye");
});

Here is a jsFiddle example that I made.

The reason for this question is that I need to trigger an action only when the second modal gets hidden and then something else when the first one gets hidden. Any ideas on how to fix this using the event for each of them???

Note: The second modal has to be inside the other as they are called as a partial view.

Aaron · Accepted Answer

I'm guessing that these modal elements are being introduced to the page asynchronously, and that's why you're using a delegated event listener bound to the document rather than binding hidden.bs.modal directly to #myModal and #uploadImage themselves. If this is not the case, and you can get away with binding directly, I'd suggest using this approach to catch the hidden event on #uploadImage itself, and prevent it from bubbling up the DOM tree using something like event.stopPropagation();.

Alternatively, though, you can continue to delegate this handler to the document, and use the target property of the Event object passed into your handler callback to determine which element was the actual source of the event:

$(document).on('hidden.bs.modal', '#myModal', function (event) {
    if (event.target.id == 'uploadImage') {
        // do stuff when the upload dialog is hidden.
    }
    else if (event.target.id == 'myModal') {
        // do stuff when the outer dialog is hidden.
    }
});

P.S.: As you may already know, the Bootstrap framework does not support overlapping modal dialogs. Be aware of this as you continue to nest modals within modals, especially concerning dismissal elements initialized via the markup API and data-dismiss="modal".

P.P.S.:

Yo dawg, I heard you like modals, so we put modals in your modals so you can modal while you modal

Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time

Answers (2)

Related Questions