在手机关闭引导模式上设置后退按钮

Question

我有一个从 Bootstrap 示例代码中获取的简单模式。是这样的：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我希望能够在手机上通过返回按钮关闭模态框，因为它在移动设备上占据了整个页面，并且在右上角搜索“x”不是很方便。我查看了文档，但只有一个选项可以使用键盘上的 Escape 键关闭模式，而移动设备没有这样的解决方案。谁能帮帮我？

Answer 1

虽然我建议使用简单的 X 或关闭按钮关闭模式，但您应该能够通过以下方式收听事件：

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // do something
  }
  if (direction == 'forward') {
    // do something else
  }
});

你需要监听导航事件和 state.direction。

您是否考虑过将 X 保留在模态框的静态标题中？而且内容是可滚动的..

Answer 2

我使它适用于我的案例，同时实现了 https://stackoverflow.com/a/42114285/5118339 和 https://stackoverflow.com/a/25464754/5118339，并进行了一些修复

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

    $('.modal').modal('hide');
    $('.modal-backdrop').remove();
}

var closedModalHashStateId = "#modalClosed";
var openModalHashStateId = "#modalOpen";

/* Updating the hash state creates a new entry
 * in the web browser's history. The latest entry in the web browser's
 * history is "modal.html#modalClosed". */
window.location.hash = closedModalHashStateId;

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

/* The latest entry in the web browser's history is now "modal.html#modalOpen".
 * The entry before this is "modal.html#modalClosed". */
$('.modal').on('show.bs.modal', function(e) {
  window.history.pushState('forward', null, './'+openModalHashStateId);
});  

/* When the user closes the modal using the Twitter Bootstrap UI, 
 * we just return to the previous entry in the web 
 * browser's history, which is "modal.html#modalClosed". This is the same thing
 * that happens when the user clicks the web browser's back button. */
$('.modal').on('hide.bs.modal', function(e) {
  window.history.back();
});