Modal backdrop does not disappear, when modal-dialog being removed in HTML

[SilverFire]

Use case: I use modal for actions' confirmation.
The modal block is placed inside of a Pjax wrapper.
There OK button triggers a Pjax request, which (in case of success) replaces overall Pjax block with the new content.
When the modal block is being removed, the backdrop stays alive, because it is placed in the end of the body.

Expected behavior: the backdrop will be removed automatically, when the modal wrapper disappears.

Steps to reproduce:

• Open Modal Live Demo, click the "Launch demo modal" button
• Open the development console and remove corresponding modal wrapper. Just execute:

$('#myModal').remove()

• Meditate on the stuck backdrop 😉

Guys, is it possible to fix this?

[cvrebert]

X-Ref: #15632

[cvrebert]

I think you should be able to simply and easily address the problem yourself by using a callback on one of the events that pjax provides. Your callback would do something like $('.modal.in').modal('hide') or $('.modal-backdrop').remove()

As mentioned in the issue that I referenced, the only way to do something about this at the Bootstrap level would be to use something like Mutation Observers, but there are some concerns with that approach.

[cvrebert]

Punting anything involving MutationObserver to consideration for Bootstrap v4.

[remartins]

$('.modal-backdrop').remove()
$(document.body).removeClass("modal-open");