关闭后按时的引导模式

Question

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

我有一个引导模式，当用户按下浏览器的后退按钮（在网络应用程序中）或设备的后退按钮（在移动应用程序中）时，我需要关闭该模式。

目前，当我按下（浏览器/设备）返回按钮时，模态框消失，没有任何动画，模态框的褪色背景仍然显示，用户被带到上一页。

我想要的是，当模态框打开时，模态框（连同背景）应该消失，并带有动画，并且用户应该留在当前页面上。

这是我的相关代码：

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

...

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

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

谢谢:)

更新

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

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

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

Answer 1

试试这个：

    $('#backbutton').click(function() {
    $('.modal').modal('hide');
});

Answer 2

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

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

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

Answer 3

试试这个：

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

你的代码会是这样的：

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

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