Twitter bootstrap modal-backdrop doesn't disappear

I just spent way too long on this problem :)

While the other answers provided are helpful and valid, it seemed a little messy to me to effectively recreate the modal hiding functionality from Bootstrap, so I found a cleaner solution.

The problem is that there are a chain of events that happen when you call

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

When you then replace a bunch of HTML as the result of the AJAX request, the modal-hiding events don't finish. However, Bootstrap triggers an event when everything is finished, and you can hook into that like so:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Hope this is helpful!

use:

$('.modal.in').modal('hide') 

Source

$('#myModal').trigger('click');

This worked for me. Its not closing because when you open the popup it triggers 2 or 3 modal-backdrops. So when you do $('#myModal')).modal('hide'); it only effect one modal-backdrop and rest remains.

After applying the top rated solution I've had a problem that it breaks future modals opening properly. I've found my solution which works good

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

I had the same problem when trying to submit the form. The solution was to change the button type from submit to button and then handle the button click event like so:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

In ASP.NET, add an update for UpdatePanel on code behind after the jquery command. Example:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();

From https://github.com/twbs/bootstrap/issues/19385

Modal's show/hide methods are asynchronous. Therefore, code such as:

foo.modal("hide"); bar.modal("show"); is invalid. You need to wait for the showing/hiding to actually complete (by listening for the shown/hidden events; see http://getbootstrap.com/javascript/#modals-events ) before calling the show or hide methods again.

I had this problem when I opened the same modal twice too fast, so an easy fix was checking if it was already shown, then to not show it again:

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}

This Line of Code after many search solved my problem, that i wanted to close the modal on ajax success:

$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });

Many thanks, Manuel Fernando https://stackoverflow.com/a/27218322/5935763

Recently I had this problem and none of solutions provided here helped me. Or it completely destroyed it so it could not be shown again. On document ready also did not work but what worked is that I wrapped all my listeners with immediately invoked function like this:

$(function () {
    $('#btn-show-modal').click(function () {
        $("#modal-lightbox").modal('show');
    });

    $('#btn-close-modal').click(function () {
        $("#modal-lightbox").modal('hide');
    });
});

There are cases where the other answers (helpful and valid) cannot be easily applied. Then a possible workaround is to implement an event that triggers a click on the modal-backdrop shortly after the modal dialog disappears.

Here is an example based on the following modal dialog:

<div class="modal fade ..." id="IdOfMyModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>

To remove the "modal-backdrop in" (that creates the background opacity on the screen) on clicking the modal, add the following code:

$('#IdOfMyModal').on("click", function() {
    setTimeout(function() {
        if ($('#IdOfMyModal').css("opacity") != "1")
            $('.modal-backdrop').trigger('click');
    }, 100);
});

After going through all the answers I came up with a catch-all solution. Eventually this is the only thing that worked for me. (vanilla javascript):

            var elem = document.querySelectorAll('[data-dismiss="modal"]')[0];
            var evt = new Event('click');
            elem.dispatchEvent(evt);

            var modalelem = document.getElementById('exampleModalCenter');

            var myModal = new bootstrap.Modal(modalelem, { keyboard: false })

            const fade = modalelem.classList.contains('fade');
            if (fade) {
                modalelem.classList.remove('fade');
            }

            myModal.hide();
            myModal.dispose();

            var backdrop = document.getElementsByClassName('modal-backdrop')[0];
            backdrop.style.display = 'none';

            var modalopen = document.getElementsByClassName('modal-open')[0];
            modalopen.classList.remove('modal-open');
            modalopen.style.removeProperty("overflow");\