-1

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');
}
Anubhav Dhawan
  • 1,431
  • 6
  • 19
  • 35

3 Answers3

0

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"

gianni
  • 1,199
  • 2
  • 14
  • 28
0

Try this : 

 $('#modalid').modal('toggle');

Your code will be like this:

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

   $('.modal').modal('toggle');
}
JoshulSharma
  • 163
  • 7
  • toggle too doesn't work. I guess this is because I am not able to stop the back press event, because calling `$('.modal').modal('hide'/'toggle')` works if I call it otherwise, while staying on this page – Anubhav Dhawan Feb 08 '17 at 13:29
-4

Try this out :

    $('#backbutton').click(function() {
    $('.modal').modal('hide');
});
Ashish Bahl
  • 1,482
  • 1
  • 18
  • 27
  • 2 things, first, I don't have any element on page (it's the browser's/device's back button), second, $('.modal').modal('hide') only hides the modal, not the modal's faded backdrop. – Anubhav Dhawan Feb 08 '17 at 13:05