Backdrop not being removed after hiding Modal

[JayCallas]

I have a custom component that shows a Modal after clicking a button. Within the Modal body, the user user is presented a anchor link that routes the user away from the current view. When the user does so, the Modal is hidden/destroyed but the Backdrop is not.

After reading through the code, I suspect that the problem is caused by the SetTimeout() when animation is in effect. Most likely, the objects are being destroyed before the SetTimeout() call happens and therefore no references are valid and the backdrop DOMelement is left in the DOM.

Ideally, it would be great if within our custom component we can either change the isAnimate property so it propagates down to the backdrop.instance.isAnimated variable or the ability to call hide() while specifying if animation should be used for that particular call. The idea is that when showing the Modal I want to fade it onto the screen. Same for hiding the Modal when the user hits escape or clicks the backdrop. But when navigating away from the current view, I just want it all to immediately go away.

The only current option is to not show the backdrop via the config.

[Toolo]

+1: sometimes, when I close the modal programmatically, the backdrop remains visible and I'm not able to manually close it

[wombatcummings]

This issue is bugging my app as well.

Using the latest ng2 router, when I route away from the modal the bs-modal-backdrop element remains in the DOM. This can be worked around by always suppressing the backdrop using the config option.

But the bigger problem is the element retains a class "modal-open" which uses overflow css to hide the scroll bars regardless of content length. It also separately leaves padding-right css on the element.

[fattslug]

+1 on this.
Hoping this is an easy fix as it makes modals almost unuseable!

[szh]

I am having this issue when the user navigates to a different route while a modal is open. My workaround is to put the following code in the parent component that contains the dialog:

ngOnDestroy(): void {
  this.modal.hide();
  $(document.body).removeClass("modal-open");
  $(".modal-backdrop").remove();
}