单击浏览器后退按钮时，引导模式关闭但模式下拉保持答案

【问题标题】：When browser back button is clicked, bootstrap modal is closed but modal-dropback stays单击浏览器后退按钮时，引导模式关闭但模式下拉保持
【发布时间】：2014-09-10 09:54:17
【问题描述】：

我正在使用带有引导程序的 Backbone。问题是当您浏览应用程序时，在某些时候您打开引导模式窗口并按下后退按钮，模式窗口关闭但模式背景 div（模式背景）保持不变并且不会消失。它覆盖整个屏幕，你不能点击任何东西。我注意到，当您关闭模态时，模态背景 div 通常会从 html 中删除，并且在这种情况下它会保留。

我在网上搜索这个解决方案，发现了类似的东西，但没有一个是按下浏览器后退按钮的潮流。

我想过捕获浏览器后退按钮事件和用户 jquery 以删除该 div，但这不是一个很好的解决方案。

有人能指出一些解决这个问题的方法吗？或者最后告诉我为什么会这样。

编辑：当按下后退按钮时，模态不会抛出 hide.bs.modal 事件，所以我无法抓住它并删除模态背景 div

【问题讨论】：

+1 用于在我的新应用中发现错误 ;)

标签： twitter-bootstrap backbone.js modal-dialog

【解决方案1】：

我们在使用 AngularJS_v1.4.7 和 Bootstrap_v3.0 开发的 Web 和移动应用程序中遇到了这个问题。预期的行为（在整个应用程序中）是 Popup 应该关闭并且页面转换不应该发生。换句话说，后退按钮只是关闭弹出窗口，没有别的。

以下修复工作正常，

//Detect location change
$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
        // Select open modal(s)
        var $openModalSelector = $(".modal.fade.in"); 
        if( ($openModalSelector.data('bs.modal') || {}).isShown == true){
            // Close open modal(s)
            $openModalSelector.modal("hide");
            // Prevent page transition
            event.preventDefault();
        }
    });

此修复已成功测试，

桌面上的 Chrome 浏览器
Windows 8.1 手机
安卓棒棒糖

【讨论】：

我可以验证这是否有效。还要确保您在主控制器中使用它，以便它出现在所有页面上。

【解决方案2】：

试试这个。它对我有用。

<script type="application/javascript">
    $(window).on('popstate', function() {
        $('.modal').modal('hide');
        $( ".modal-backdrop" ).remove();
        $( ".in" ).remove();
    });
</script>

【讨论】：

【解决方案3】：

您可以监听 HTML5 popstate 事件，然后如果您发现模态背景显示，则触发 hide.bs.modal 事件。

$(window).on('popstate', function() {
  alert('Back button was pressed.');
});

或者使用History.js工具events捕捉后退按钮事件，然后和上一个解决方案一样。

【讨论】：

别忘了用$(window).off() 结束，否则你会有僵尸听众！