Question

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

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

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

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

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

Answer 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手机
Android Lollipop

Answer 2

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

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

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

Answer 3

试试这个。它适合我。

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

单击浏览器后退按钮时，将关闭引导模式，但保留模态回退

3 个答案: