This article is describes the JavaScript needed to manually close a modal. This is helpful if you have multiple modals opened at the same time.

Today I was doing something funky stuff with my code. I was using bootstrap 3 on my website and doing my funky code, I ran into a situation where I need to trigger a modal when a button was clicked.

I got the scrpt to work, but when the close button was clicked inside the modal, nothing would happen and it would not work.

After playing around a bit, this is how I was able to get it closed. I placed this JavaScript code using jquery.

This is the HTML for the close button:

<input type="button" class="btn btn-danger pull-right" value="Cancel" data-dismiss="modal">

After I added the following JavaScript code, it worked:

        $('[data-dismiss]').on('click', function(){
                $('.modal').remove();
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
            });

Hope that helps if you are stuck with a modal or maybe you are stuck with a modal that closes but the background is dark and even if its not dark, the scroll might be disabled. Well, with this code, it gets rid of the .modal, removes the .model-open from the body tag and removes the modal-backdrop. I am not sure at this point what consequences this all will have on other modals after this code executes. If I see other issues, I will post them here.