Bootstrap 模态关闭问题

Question

我正在尝试解决 modal 中的错误。我正在使用 Bootstrap、Angular 和 ng-Route。我最近在 mobile 上（然后在桌面上）注意到，当我在 modal 打开的情况下按下后退按钮时，它会留下一个灰色的覆盖层，你不能 click 任何东西。所以我发现部分解决问题的解决方案是添加这个脚本：

$(".modal").on("shown.bs.modal", function()  { // any time a modal is shown
      var urlReplace = "#/" + $(this).attr('id'); // make the hash the id of the modal shown
      history.pushState(null, null, urlReplace); // push state that hash into the url
    });

    // If a pushstate has previously happened and the back button is clicked, hide any modals.
    $(window).on('popstate', function() {
      $(".modal").modal('hide');
    });

这对用户 presses 和 back button 非常有用，但是当用户通过单击模式外部或点击退出关闭 modal 时，urlReplace 仍然存在browser 地址栏。 我想让它在 modal 关闭时恢复到以前的状态。

如果该问题无法解决，我至少希望解决另一个问题，即：当用户通过单击外部或点击退出来关闭 modal 时，urlReplace 仍然存在browser 地址很好，但是当用户转到我的 nav bar 中的 click a link 时，它不会将他们带到 link转到地址栏中仍带有 urlReplace 的空白页，然后我可以再次 click 在 nav bar 中输入 link，它将转到正确的 link 我觉得很奇怪不知道如何解决这个问题。

对此有任何想法或见解都很棒！

Answer 1

您可以添加一个处理程序来监视模态关闭事件，然后推送删除哈希的新历史记录：

$(".modal").on("hidden.bs.modal", function()  { // any time a modal is hidden
    var urlReplace = window.location.toString().split('#', 1)[0]
    history.pushState(null, null, urlReplace); // push url without the hash as new history item
});

Bootstrap 模态关闭问题

Bootstrap modal close issue

javascript

twitter-bootstrap

angularjs

bootstrap-modal

ngroute