javascript - Dismiss bootstrap modal on back press

Question

I have a meteor app for both web and mobile platforms.

I have a bootstrap modal in it, and I need the modal to be dismissed whenever a user presses the browser's back button (in web app), or device's back button (in mobile app).

Currently, when I press (browser/device) back button, the modal disappears without any animation, the modal's faded backdrop is still displayed, and the user is taken to the previous page.

What I want is that when the modal is open, the modal (along with the backdrop) should dismiss, with animation, and the user should remain on the current page.

Here's my relevant code:

$(window).on('popstate', this.handleBackPress);
document.addEventListener("backbutton", this.handleBackPress, false);

...

handleBackPress(event) {
    event.preventDefault();
    event.stopPropagation();

    $('.modal').modal('hide');
}

Thanks :)

Update

Using the following code in android dismisses the modal correctly, and stays on the same page. But now, it never ever allows the back press event to propagate.

document.addEventListener("backbutton", this.handleBackPress);
...

handleBackPress(event) {
    $('.modal').modal('hide');
}

Answer 1

in your function, add $('.modal-backdrop').remove();

handleBackPress(event) {
  event.preventDefault();
  event.stopPropagation();
  $('.modal').modal('hide');
  $('.modal-backdrop').remove();
}

As for the fade effect, your modal should have a fade class attached to it: class="modal fade"