在背压时关闭引导模式 [英] Dismiss bootstrap modal on back press

问题描述

我有一个适用于网络和移动平台的流星应用程序.

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.

这是我的相关代码:

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

...

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

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

谢谢:)

在 android 中使用以下代码可以正确关闭模态，并保持在同一页面上.但是现在，它永远不会允许 back press 事件传播.

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');
}

推荐答案

在你的函数中，添加 $('.modal-backdrop').remove();

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

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

至于淡入淡出效果，你的模态应该有一个淡入淡出的类:class="modalfade"

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

这篇关于在背压时关闭引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！