当浏览器返回按钮被点击时，Bootstrap 模态框被关闭，但模态框背景仍然存在。

Question

我正在使用Backbone和Bootstrap。问题是，在应用程序中某个点打开Bootstrap模态窗口并按后退按钮时，模态窗口关闭但模态背景div（modal-backdrop）仍然存在，不会消失。它覆盖了整个屏幕，你无法点击任何东西。我注意到，当您正常关闭模态框时，模态背景div将从HTML中删除，在这种情况下，它会保留。

我在网上搜索此解决方案，并找到了类似的内容，但没有一个与浏览器后退按钮按下相关联。

我考虑捕获浏览器后退按钮事件并使用jquery删除该div，但那并不是真正好的解决方案。

有人可以指出解决这个问题的一些解决方案吗？或者至少告诉我为什么会发生这种情况。

编辑： 当按下后退按钮时，模态不会抛出hide.bs.modal事件，因此我无法捕获它并删除modal-backdrop div。

- toskebre

---

在我的新应用程序中发现了一个漏洞 +1 ;) - Tom Hammond

Answer 1

试试这个。对我很有效。

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

- Murali

Answer 2

我们在使用AngularJS_v1.4.7和Bootstrap_v3.0开发的Web和移动应用程序中遇到了这个问题。期望的行为（在整个应用程序中）是，弹出窗口应该关闭，页面转换不应该发生。换句话说，返回按钮只关闭弹出窗口，不做其他任何操作。

以下修复方法可行：

//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手机
• Android Lollipop系统

- Gaurang Patel

---

我可以验证这个有效。另外，请确保您在主控制器中使用它，以便它出现在所有页面上。 - Nina Morena

Answer 3

如果您发现modal-backdrop被显示，您可以侦听HTML5的popstate事件，然后触发hide.bs.modal事件。

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

或者使用 History.js 工具及其 事件 来捕获后退按钮事件，并执行与前一个解决方案相同的操作。

- Rida BENHAMMANE

---

不要忘记使用 $(window).off() 关闭监听器，否则你会有僵尸监听器！ - mix3d